javascript - 通过增加或减少Input Box中的数量来更新糖果的总成本-React JS

在一个简单的程序中，我想增加或减少糖果的数量，然后将其成本（* 5，因为1个糖果的成本为5美元）打印到输入框。不幸的是，价值没有更新。有人可以帮忙吗？

class App extends React.Component {
  state = {
    candy: 0,
    candyPrice: 0
  }
  render() {

    return (
    <div>
        <input type="number" value={this.state.candy} onChange={this.alpha} name="candy" id="candy"/>
        <span>{this.state.candyPrice}</span>
    </div>
   )
   alpha = (ev) => {
    this.setState({
            [ev.target.name]: ev.target.value
    });
    this.state.candyPrice = this.state.candy * 5;
   }

  }
}
ReactDOM.render(<App/>, document.getElementById('app'));

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

最佳答案

您需要在代码中进行一些更改：


将onChange事件处理程序移到render方法之外。
更新this.setState时，请使用candyPrice而不是直接更改状态对象。
为什么不直接改变状态？当您使用此this.state.candyPrice改变状态时，会导致一个奇怪的错误，其中显示的糖果价格为先前输入* 5的值。



  不建议直接修改状态，因为React不会知道
  更改，并且不会导致重新渲染。




考虑到这一点，您的事件处理程序应与此类似。

alpha = ev => {
  const candies = ev.target.value;
  this.setState({
    [ev.target.name]: candies,
    candyPrice: candies * 5
  });
};

请参见working implementation。

关于javascript - 通过增加或减少Input Box中的数量来更新糖果的总成本-React JS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54075961/