Javascript 如何正确设置组件'；在每次重新渲染时都不会被擦除的情况下的状态？

我正在尝试使用React创建一个宏计算器

我有一个click处理程序，它将

设置state

，但是当组件刷新时，所有内容都不会保存在该状态中（我通过转到React Dev工具并查看组件进行了检查）

我很确定这是因为当组件重新呈现时，状态被重新初始化为一个空白对象，就像在我的构造函数中编码的那样（如果我错了，请帮助我理解为什么状态总是显示为空白）

我知道在组件刷新之前，它确实工作了一秒钟；我可以看到使用React-Dev工具将状态更改为正确的值，然后它刷新组件，所有内容再次变为空白

我怎样才能解决这个问题

我曾考虑过将其分解成更小的组件，但不确定是否有必要

import React from 'react';


class Macro extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.handleClick = this.handleClick.bind(this);
        this.lbsToKg = this.lbsToKg.bind(this);
        this.age = document.querySelector("#age");
    }

    ftToInch(ft) {
        return ft * 12;
    }

    inchesToCm (inches) {
        return inches * 2.54;
    }


    lbsToKg(lbs) {
        return (Math.round(lbs * 0.45359237));
    }

    // mifflinStJeor(sex) {
    //  if ('male') {
    //      10 * lbsToKg(this.state.weight) + 6.25 * height(cm) - 5 * this.state.age + 5
    //  } else {
    //      10 * lbsToKg(this.state.weight) + 6.25 * height(cm) - 5 * this.state.age  + 161
    //  }
    // }

    handleClick(e) {
        this.setState({
            weight: this.lbsToKg(document.querySelector("#weight").value),
            age: document.querySelector("#age").value,
            height: this.ftToInch(document.querySelector("#ft").value) + document.querySelector("#inches"),
        })
    }

    render() {
        return(
            <div className='calculator-wrapper'>
                <form>
                    <div className="sex">
                        <input type="radio" id="sex-male" />
                        <label htmlFor='sex-male'>Male</label>
                        <input type="radio" id="sex-female"/>
                        <label htmlFor='sex-female'>Female</label>
                    </div>
                    <div className="age">
                        <label htmlFor='age'>Age</label>
                        <input type="number" id='age' name="age" />
                    </div>
                    <div className="weight">
                        <label htmlFor='weight'>Weight</label>
                        <input type="number" id='weight' name="weight" />
                    </div>
                    <div className="height">
                        <label htmlFor='height'>Height</label>
                        <input type="number" id='ft' name="feet" placeholder="ft" />
                        <input type="number" id='inches'  placeholder="inch"  name="inches" />
                    </div>
                    <div className="output">
                        <input type="text" className="bmr-output" value={this.state.weight}/>
                    </div>
                    <div className="button">
                        <button className="bmr" onClick={this.handleClick}>Get BMR</button>
                    </div>
                </form>
            </div>
            )
    }
}


export default Macro;

从“React”导入React；
类宏扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={}；
this.handleClick=this.handleClick.bind（this）；
this.lbsToKg=this.lbsToKg.bind（this）；
this.age=document.querySelector（“年龄”）；
}
英尺到英寸（英尺）{
返回ft*12；
}
英寸/厘米（英寸）{
返回英寸*2.54；
}
磅/千克（磅）{
返回（数学圆整（磅*0.45359237））；
}
//mifflinStJeor（性别）{
//如果（'男性'）{
//10*磅/公斤（本州体重）+6.25*身高（厘米）-5*本州年龄+5
//}其他{
//10*磅/千克（本州体重）+6.25*身高（厘米）-5*本州年龄+161
//  }
// }
handleClick（e）{
这是我的国家({
重量：这个.lbsToKg（document.querySelector（“#weight”）.value），
年龄：document.querySelector（“#age”）.value，
高度：这个.ftToInch（document.querySelector（“#ft”）.value）+document.querySelector（“#inches”），
})
}
render（）{
返回(
男性
女性
年龄
重量
高度
获取BMR
)
}
}
导出默认宏；

由于您的按钮没有与之关联的类型，因此它被视为

type=submit

。 这将使您的表单提交并刷新页面（实际提交表单）

---

要使其在按钮标签的

type=button

处工作，请将其作为

type=submit

。 这将使您的表单提交并刷新页面（实际提交表单）

---

使其在按钮标签上工作。

您所说的“组件刷新时”是什么意思。你的意思是刷新整个网页吗？根据我对React的理解，当你使用setState（）时，它会重新呈现（刷新？我可能使用了错误的术语）组件，对吗@Prakashsharma@WonkasWilly另外，对于react中的一般最佳实践，您应该仔细研究，而不是使用

document.querySelector

从DOM中读取值。在大多数情况下，在react中工作时几乎不需要使用原始domapi方法，您所说的“组件刷新时”是什么意思。你的意思是刷新整个网页吗？根据我对React的理解，当你使用setState（）时，它会重新呈现（刷新？我可能使用了错误的术语）组件，对吗@Prakashsharma@WonkasWilly另外，对于react中的一般最佳实践，您应该仔细研究，而不是使用

document.querySelector

从DOM中读取值。在大多数情况下，在React中工作时几乎不需要使用原始domapi方法