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)の結果が表示されます。
私はここで間違っていますか?