javascript - 如何正确设置组件的状态而不在每次重新渲染时都将其删除？

Question

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

我有一个将setState的点击处理程序，但是当组件刷新时，所有内容都不会保存在状态中(我通过转到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;

Answer 1

由于您的按钮没有与之关联的类型，因此它被视为type=submit。 这使得您的表单提交并刷新页面(实际提交表单)。

使其在 type=button 到按钮标签上工作。