通过在输入框中增加或减少计数来更新糖果的总成本 - React JS

Question

在一个简单的程序中，我想增加或减少糖果的数量，然后打印它的成本（* 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>

Answer 1

您需要更改代码中的一些内容：

• 将 onChange 事件处理程序移出呈现方法。

• 更新candyPrice时使用 this.setState 而不是直接改变状态对象。

• 为什么不直接改变状态？当您使用此this.state.candyPrice改变状态时，它会导致一个奇怪的错误，其中显示的糖果价格是上一个输入的值* 5。

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

---

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

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

请参阅工作实现。