reactjs setStateコールバックを使用して前回の入力値を取得した計算値

Question

私は与えられた数値を2倍にする簡単な電卓を作成して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}); 
    } 

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

EDIT：私はあなたのソリューションを実現コールバックを使用することは完全に有効ですが、コールバック関数を渡す代わりに実行しているため、機能していません。

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' 

））;