2016-05-15 19 views
0

Reactの仕組みを理解するためにこの「通貨変換」を作成しました。React-App:次のイベントの後に小道具が更新されます

それは(多かれ少なかれ)を動作しますが、結果はオフセットで示されている:

あなたは「1」(ユーロ)=>それは示し、「0ドル」と入力します。

「10」=>「1.1308ドル」と表示されます。

「100」=>「11.308ドル」と表示されます。 CodePenの

...

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>

ライブ・デモ:http://codepen.io/mizech/pen/vGbJxe

それは一度に(ユーロ* EXCHANGERATE)の結果が表示されます。

私はここで間違っていますか?

答えて

3

結局2つのsetStatesを呼び出すと、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


私が見る第二の問題、それを使用するより良いだろうdocument.querySelectorの代わりにref

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> 
) 
} 
関連する問題