Javascript 为什么我的计算功能不工作？

我正在使用React开发一个简单的提示计算器

我几乎完成了，但“计算功能”不起作用

我的组件中有4个状态

this.state = {
  bill: 0,
  value: 0.3, {/* this is a select tag */}
  people: 0,
  total : 0,
};

我在计算函数中的公式是

    calculate(e){
       e.preventDefault();

       this.setState({
        total: (this.state.bill * this.state.value ) / this.state.people
      });
    }

这应该会更新我的{This.state.total}，但每当我单击该按钮时，它都无法正常工作。我试着检查chrome中的开发者工具，但没有发现任何问题

类容器扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
比尔：0，
数值：0.3，
人:0,，
总数：0，
};
this.handleChange=this.handleChange.bind（this）；
this.handleService=this.handleService.bind（this）；
this.handlePeople=this.handlePeople.bind（this）；
this.calculate=this.calculate.bind（this）；
}
手变（活动）{
this.setState（{bill:event.target.value}）；
}
手持服务（事件）{
this.setState（{value:event.target.value}）；
}
handlePeople（e）{
这是我的国家({
人：即目标价值观
})
}
计算（e）{
e、 预防默认值（）；
这是我的国家({
总计：（this.state.bill*this.state.value）/this.state.people
})
}
render（）{
返回(
小费计算器
算算！
{this.state.total}

);
}
}
类。组件{
render（）{
返回(
你的账单是多少

$ 
);
}
}
类服务扩展了React.Component{
render（）{
返回(
你的服务怎么样

30%未付
20%好
15%——还行
10%坏
差5%
);
}
}
类。组件{
render（）{
返回(
有多少人在分担账单

人
);
}
}
ReactDOM.render（，
document.getElementById（'root'）
尝试在表单中移动按钮

 <form onSubmit={this.calculate}>
      <Bill bill={this.handleChange} />
      <Service value={this.state.value} service={this.handleService} />
      <People people={this.handlePeople} />
      <button>
        CALCULATE!
      </button>    
 </form>

<form onSubmit={this.calculate}>
  <Bill bill={this.handleChange} />
  <Service value={this.state.value} service={this.handleService} />
  <People people={this.handlePeople} />
  <button>CALCULATE!</button>
</form>


算算！

并且，如果您可以将某些组件更改为无状态组件。像这样：

const Service = (props) => {
    return (
      <div>
        <p> How was your service?  </p>
        <select value={props.value} onChange={props.service}>
          <option value="0.3">30% - Outstanding </option>
          <option value="0.2">20% - Good </option>
          <option value=".15">15% - It was OK</option>
          <option value=".1">10% - Bad </option>
          <option value=".05">5% Terrible </option>
        </select>
      </div>
    );
}

const服务=（道具）=>{
返回(
你的服务怎么样

30%未付
20%好
15%——还行
10%坏
差5%
);
}
尝试在表单中移动按钮

 <form onSubmit={this.calculate}>
      <Bill bill={this.handleChange} />
      <Service value={this.state.value} service={this.handleService} />
      <People people={this.handlePeople} />
      <button>
        CALCULATE!
      </button>    
 </form>

<form onSubmit={this.calculate}>
  <Bill bill={this.handleChange} />
  <Service value={this.state.value} service={this.handleService} />
  <People people={this.handlePeople} />
  <button>CALCULATE!</button>
</form>


算算！

并且，如果您可以将某些组件更改为无状态组件。像这样：

const Service = (props) => {
    return (
      <div>
        <p> How was your service?  </p>
        <select value={props.value} onChange={props.service}>
          <option value="0.3">30% - Outstanding </option>
          <option value="0.2">20% - Good </option>
          <option value=".15">15% - It was OK</option>
          <option value=".1">10% - Bad </option>
          <option value=".05">5% Terrible </option>
        </select>
      </div>
    );
}

const服务=（道具）=>{
返回(
你的服务怎么样

30%未付
20%好
15%——还行
10%坏
差5%
);
}
因为您使用的是onSubmit事件，所以按钮必须位于表单内部

 <form onSubmit={this.calculate}>
      <Bill bill={this.handleChange} />
      <Service value={this.state.value} service={this.handleService} />
      <People people={this.handlePeople} />
      <button>
        CALCULATE!
      </button>    
 </form>

<form onSubmit={this.calculate}>
  <Bill bill={this.handleChange} />
  <Service value={this.state.value} service={this.handleService} />
  <People people={this.handlePeople} />
  <button>CALCULATE!</button>
</form>


算算！

如果希望将按钮保持在表单之外，也可以为按钮添加onClick事件，如下所示

<button onClick={this.calculate}>CALCULATE!</button>

计算！
因为您使用的是onSubmit事件，所以按钮必须位于表单内部

 <form onSubmit={this.calculate}>
      <Bill bill={this.handleChange} />
      <Service value={this.state.value} service={this.handleService} />
      <People people={this.handlePeople} />
      <button>
        CALCULATE!
      </button>    
 </form>

<form onSubmit={this.calculate}>
  <Bill bill={this.handleChange} />
  <Service value={this.state.value} service={this.handleService} />
  <People people={this.handlePeople} />
  <button>CALCULATE!</button>
</form>


算算！

如果希望将按钮保持在表单之外，也可以为按钮添加onClick事件，如下所示

<button onClick={this.calculate}>CALCULATE!</button>

计算！
计算按钮在表单外部。你应该在表单中使用它

<input type="submit" value="Calculate">



另一种方法是使用按钮，而不是表单的onsubmit事件
 计算按钮在表单外部。你应该在表单中使用它

<input type="submit" value="Calculate">



另一种方法是使用按钮，而不是表单的onsubmit事件
 除了在表单中移动按钮外，我认为您还应该在按钮上添加type=“submit”属性

<form onSubmit={this.calculate}>
  <Bill bill={this.handleChange} />
  <Service value={this.state.value} service={this.handleService} />
  <People people={this.handlePeople} />
  <button type="submit">CALCULATE!</button>
</form>


算算！
除了在表单中移动按钮外，我认为您还应该在按钮上添加type=“submit”属性

<form onSubmit={this.calculate}>
  <Bill bill={this.handleChange} />
  <Service value={this.state.value} service={this.handleService} />
  <People people={this.handlePeople} />
  <button type="submit">CALCULATE!</button>
</form>


算算！
谢谢您的建议，是的，我将把我的组件更改为无状态组件。谢谢您的建议，是的，我将把我的组件更改为无状态组件。