为什么我的计算功能不起作用？

Question

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

我快完成了，但是“计算功能”不起作用。

我的组件中有4个状态

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

compute函数中的公式是

    calculate(e){
       e.preventDefault();

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

这应该会更新我的{this.state.total}，但是每当我单击按钮时，它都无法正常工作。我尝试检查Chrome中的开发人员工具，但找不到任何问题。

class Container extends React.Component {
  constructor(props){
    super(props)

    this.state = {
      bill: 0,
      value: 0.3,
      people: 0,
      total : 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);
    
  }

  handleChange(event) {
    this.setState({bill: event.target.value});
  }

  handleService(event) {
    this.setState({value: event.target.value});
  }

  handlePeople(e){
    this.setState({
      people : e.target.value
    })
  }

calculate(e){
  e.preventDefault();

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

  render() {
    return (
      <div className="container">
        <h2> Tip Calculator</h2>
          <form onSubmit={this.calculate}> 
            <Bill bill={this.handleChange}/>
            <Service value={this.state.value}  service={this.handleService}/>
            <People people={this.handlePeople} />
          </form>
          <button>
            CALCULATE!
          </button>
          <p>{this.state.total}</p>
      </div>

    );
  }
}


class Bill extends React.Component {

  render() {
    return (
        <div>
          <p>How much was your bill? </p>
          <span>$ </span><input placeholder="Bill Amount"  onChange={this.props.bill}/>
        </div>
    );
  }
}


class Service extends React.Component {

  render() {
    return (
      <div>
        <p> How was your service?  </p>
          <select value={this.props.value} onChange={this.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>
    );
  }
}

class People extends React.Component {

  render(){
    return (
       <div>
        <p>How many people are sharing the bill?</p>
        <input type="text" placeholder="Number of People" onChange={this.props.people}/> <span> People </span>
       </div> 
    );
  }
}


ReactDOM.render(<Container />,
document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root">
</div>

我无法运行代码段，因此我将在此处附加图像。

Answer 1

除了在表单内移动按钮外，我认为您应该在按钮上放置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>

Answer 2

尝试在表单内移动按钮

 <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>
    );
}

Answer 3

由于您使用的是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>

如果您希望将按钮保持在这种形式之外，还可以为按钮添加onClick事件

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

Answer 4

“计算”按钮在表单外部。您应该在Form中使用它。

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

另一种方法是使用binding click event来代替表单的onsubmit事件。