使用reactjs setState回调获取上一个输入值的计算值

Calculated value getting previous input value using reactjs setState callback

本文关键字：输入 计算 上一个 获取 reactjs setState 回调 使用      更新时间：2023-09-26

我正在通过创建一个将给定数字加倍的简单计算器来学习reactjs。调用this.setState的回调时，它具有this.state.amount的现有值，而不是刚刚输入的新值。

  handleAmountChange: function(event) {
    this.setState({amount: event.target.value}, this.calculate());
  },
  calculate: function() {
      this.setState({calculatedAmount: this.state.amount * 2});
  }

我应该怎么做才能在计算函数中获得这个.state.amount的最新版本？

https://plnkr.co/edit/FoTEK9PglqhUajq1lLXJ?p=preview

看看这个答案。简而言之，setState只创建了一个挂起的状态转换，而不是立即的状态突变。

在您的情况下，我认为最干净的方法是使用refs，而不是将输入的值传递给状态并从中读取：

var Calculator = React.createClass({  
  getInitialState: function() {
    return {
      calculatedAmount: 0.0
    };
  },
  calculate: function() {
    this.setState({calculatedAmount: this.refs.myNumber.value * 2});
  },
  render: function(){
    return (
      <div id="calculator">
        <h3>Calculator</h3>
        <input type="text" ref="myNumber" onChange={this.calculate} />
        <span>{this.state.calculatedAmount}</span>
      </div>
    );
  }
});

编辑：我意识到你使用回调的解决方案是完全有效的，但它不起作用，因为你正在执行回调函数，而不是传递它

handleAmountChange: function(event) {
  this.setState({amount: event.target.value}, this.calculate);
},
calculate: function() {
  this.setState({calculatedAmount: this.state.amount * 2});
}

在您的特定情况下，您可以一次设置多个状态，即在handleAmountChange中执行计算。

var Calculator = React.createClass({  
  getInitialState: function() {
    return {
      amount: 0.0,
      calculatedAmount: 0.0
    };
  },
  handleAmountChange: function(e) {
    var input = e.target.value; 
    this.setState({amount: input, calculatedAmount: input * 2});
  },
  render: function(){
    return (
      <div id="calculator">
        <h3>Calculator</h3>
          <input type="text" value={this.state.amount} onChange={this.handleAmountChange} />
          <span>{this.state.calculatedAmount}</span>
      </div>
    );
  }
});
ReactDOM.render(<Calculator />, document.getElementById('container'

))；

相关文章：