Question

我正在通过创建一个给定数字加倍的简单计算器来学习反应。当调用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});
  }

我应该怎么做才能在calculate函数中获取this.state.amount的最新版本？

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

Answer 1

看看this answer。简而言之，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});
}

Answer 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'

））;

使用reactjs setState回调计算得到上一个输入值的值

2 个答案: