React-App：道具在下一個事件後更新

Question

我已經制作了這個「貨幣轉換器」來了解React如何工作。

它的工作原理（更多或更少），但結果顯示具有偏移：

您鍵入「1」（歐元）=>它顯示「0元」。

您輸入「10」=>它顯示「1.1308美元」。

輸入「100」=>顯示「11.308美元」。

...

var Display = React.createClass({ 
 
    render: function() { 
 
    return (
 
     <div> 
 
     <p>{this.props.euro + ' Euro are equal to ' + this.props.dollar + ' Dollar.'}</p> 
 
     </div> 
 
    ) 
 
    } 
 
}); 
 

 
var Converter = React.createClass({ 
 
    getInitialState: function() { 
 
    return { euro: 0, dollar: 0, exchangeRate: 1.1308 } 
 
    }, 
 
    convertEuroToDollar: function() { 
 
    this.setState({ euro: +document.querySelector('#amount-euro').value }); 
 
    this.setState({ dollar: this.state.euro * this.state.exchangeRate }); 
 
    }, 
 
    render: function() { 
 
    return (
 
     <div> 
 
     <input type="text" id="amount-euro" onKeyUp={this.convertEuroToDollar} /> 
 
     <Display dollar={this.state.dollar} euro={this.state.euro} exchangeRate={this.state.exchangeRate} /> 
 
     </div> 
 
    ) 
 
    } 
 
}); 
 

 
ReactDOM.render(
 
    <Converter />, 
 
    document.querySelector('#app') 
 
);

div { 
 
    margin: 30px 50px; 
 
}

<div id="app"></div>

實況演示上CodePen：http://codepen.io/mizech/pen/vGbJxe

應該同時顯示的結果（歐元* EXCHANGERATE）。

我在做什麼錯在這裏？

Answer 1

畢竟調用兩個setState，你沒有正確設置euro狀態。
作爲異步，你還在使用它的舊值。

從文檔：

的setState（）不會立即發生變異this.state而是創建一個 掛起狀態轉變。調用 方法後訪問this.state可能會返回現有值。

https://facebook.github.io/react/docs/component-api.html

要解決該問題，請：

convertEuroToDollar: function() { 
    const euro = +document.querySelector('#amount-euro').value 
    this.setState({ 
    euro: euro, 
    dollar: euro * this.state.exchangeRate 
    }); 
}, 

固定例如：http://codepen.io/FezVrasta/pen/xVeMMX

其次的問題，我看，這將是更好的使用ref而不是document.querySelector。

convertEuroToDollar: function() { 
    const euro = +this.refs.amountEuro.value; 
    this.setState({ 
    euro: euro, 
    dollar: euro * this.state.exchangeRate 
    }); 
}, 
render: function() { 
    return (
    <div> 
     <input type="text" ref="amountEuro" onKeyUp={this.convertEuroToDollar} /> 
     <Display dollar={this.state.dollar} euro={this.state.euro} exchangeRate={this.state.exchangeRate} /> 
    </div> 
) 
}