Question

下面是我的代码，我感到自己确实做错了。我是新来的反应者，我花了很多时间试图解决这个问题，但是没有运气。

我试图让用户输入年龄，性别，身高，体重等值，然后使BMR框更新为一个值。

到目前为止，我所拥有的是当用户单击“为BMR计算”时，onClick函数会吐出正确的结果，但是我不知道如何在没有任何形式的情况下使值出现在“ BMR输入框”中令人耳目一新。

任何帮助将不胜感激。谢谢

 class Calculator extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};

        this.handleGenderChange = this.handleGenderChange.bind(this);
        this.handleAgeChanged = this.handleAgeChanged.bind(this);
        this.handleWeightChanged = this.handleWeightChanged.bind(this);
        this.handleFeetChanged= this.handleFeetChanged.bind(this);
        this.handleInchesChanged=this.handleInchesChanged.bind(this);


    }

    handleGenderChange = (event) => {
        this.setState({Gender: event.target.value});
    }

    handleAgeChanged = (event) => {
        this.setState({Age: event.target.value});
    }

    handleWeightChanged = (event) => {
        this.setState({Weight: event.target.value});
    }

    handleHeightChanged = (event) => {
        this.setState({Height: event.target.value});
    }

    handleFeetChanged = (event) => {
        this.setState({Feet: event.target.value});
    }
    handleInchesChanged = (event) => {
        this.setState({Inches: event.target.value});
    }
    onClick= (event) => {
        event.preventDefault();
        console.log(this.state);

        const totalHeight = Number(this.state.Feet) * 12 + Number(this.state.Inches);

        if(this.state.Gender == 'Male'){
            var BMR = 66 + (6.23 * Number(this.state.Weight)) + (12.7 * totalHeight) - (6.8 * Number(this.state.Age));
            console.log(BMR);
        }

        if(this.state.Gender == 'female'){
            var BMR = 655 + (4.35 * Number(this.state.weight)) + (4.7 * totalHeight) - (4.7 * Number(this.state.age));
            console.log(BMR);
        }

    }

    render() {
        return (
            <div>

                    <Container>
                        <form>
                            <h3>Calories/TDEE Calculator</h3>

                            <div className="form-group">
                            <select className="form-control" value={this.state.Gender} onChange={this.handleGenderChange}>
                                <option disabled selected value> -- Gender-- </option>
                                <option value="Male">Male</option>
                                <option value="Female">Female</option>
                            </select>
                            </div>

                            <div className="form-group">
                            <label htmlFor="Age">Age</label>
                                <input className="form-control" 
                                onChange={this.handleAgeChanged} 
                                type="input" 
                                id="Age" 
                                name="Age" 
                                placeholder="Enter an Age"
                                value={this.state.Age} 
                                /> 
                            </div>

                            <div className="form-group">
                            <label htmlFor="Weight">Weight (lbs)</label>
                                <input className="form-control" 
                                onChange={this.handleWeightChanged} 
                                type="input" 
                                id="Weight" 
                                name="Weight" 
                                placeholder="Enter Weight"
                                value={this.state.Weight} 
                                /> 
                            </div>

                            <div className="form-group">
                            <label>"Height (Ft/In)"</label>
                                <input type="input" 
                                name="Feet"  
                                placeholder="Feet" 
                                onChange={this.handleFeetChanged} 
                                value={this.state.Feet} 
                                 /> 

                                <input type="input" 
                                name="Inches" 
                                placeholder="Inches" 
                                onChange={this.handleInchesChanged} 
                                value={this.state.Inches}
                                /> 
                           </div>

                            <div className="form-group">
                            <label>BMR</label>
                                <input className="form-control" 
                                id="BMR" 
                                name="BMR" 
                                value= ""
                                /> 
                            </div>
                            <button className="btn btn-lg btn-primary btn-block" onClick={this.onClick.bind(this)}>Click for BMR</button> <br />

                            &nbsp; &nbsp;

                        </form>

                    </Container>

            </div>


        );
    }

}
export default Calculator;

编辑： 感谢大家花时间帮助您，它有效：D。我从您的所有答复中获悉。

Answer 1

您没有任何可渲染this.state.BMR的东西，因此在任何地方都看不到它也就不足为奇了。一些建议：不要使用不间断的空格，而<br>：这就是CSS的用途。另外，不要使用绑定，使用箭头符号保留this，没有没有理由在构造函数中使用所有这些bind调用。

然后是一个实际的问题：您需要实际渲染一些东西，因此要有一个根据您是否对其进行计算而显示按钮或BMR值的元素：

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  handleGenderChange(evt) {
    // you really should validate this
    this.setState({Gender: event.target.value});
  }

  ...

  render() {
    return <div>
      ...
        <inputelement onChange={evt => this.handleInchesChanged(evt) } />
      ...
      { this.showButtonOrResult() }
    </div>;
  }

  showButtonOrResult() {
    // if the button wasn't clicked yet, then `BMR` will not yet be a state value
    if (!this.state.BMR) {
      return <button className="..." onClick={evt => this.onClick(evt)>Click for BMR</button>
    } 
    // if it IS a state value, just render it
    return <div>Your BMR is: { this.state.BMR }</div>;
  }
}

因此，当单击按钮时，您将执行操作，计算BMR，然后setState，然后render()会自动再次被调用。现在有一个要显示的值，而不是按钮，它将显示带有结果的div。

还要注意，我们绝对不是在构造函数中使用bind(this)，因为这很荒谬。使用箭头函数正确处理事件，以便获取事件，然后在正常的this上下文中将事件传递给正确的函数。

Answer 2

您需要正确标记状态属性。您的女性计算将吐出NaN，因为在将其设置为“体重”时您正在使用{this.state.weight}

初始化您的状态

this.state = {
  bmr: ''
};

设置输入值

        <div className="form-group">
          <label>BMR</label>
          <input className="form-control"
            id="BMR"
            name="BMR"
            value={this.state.bmr}
          />
        </div>

在您的onclick函数中设置状态

onClick = (event) => {
event.preventDefault();

let BMR;

const totalHeight = Number(this.state.Feet) * 12 + Number(this.state.Inches);

if (this.state.Gender === 'Male') {
  BMR = 66 + (6.23 * Number(this.state.Weight)) + (12.7 * totalHeight) - (6.8 * Number(this.state.Age));
  this.setState({ bmr: BMR });
} else if (this.state.Gender === 'Female') {
  BMR = 655 + (4.35 * Number(this.state.Weight)) + (4.7 * totalHeight) - (4.7 * Number(this.state.Age));
  this.setState({bmr: BMR});
}
}

尝试显示BMR而无需重新加载页面

2 个答案: