これに取り組む正しい方法は何ですか?
var Hello = React.createClass({
getInitialState: function() {
return {total: 0, input1:0, input2:0};
},
render: function() {
return (
<div>{this.state.total}<br/>
<input type="text" value={this.state.input1} onChange={this.handleChange} />
<input type="text" value={this.state.input2} onChange={this.handleChange} />
</div>
);
},
handleChange: function(e){
this.setState({ ??? : e.target.value});
t = this.state.input1 + this.state.input2;
this.setState({total: t});
}
});
React.renderComponent(<Hello />, document.getElementById('content'));
もちろん、それぞれの異なる入力を処理するために個別の handleChange 関数を作成することもできますが、これはあまり良い方法ではありません。同様に、個々の入力専用のコンポーネントを作成することもできますが、このように実行する方法があるかどうかを確認したかったのです。
ベストアンサー1
次のような標準的なHTML属性を使用することをお勧めします。name入力を識別するために要素を使用しますinput。また、状態に他の値を追加することで構成できるため、状態内で「合計」を別の値として保持する必要はありません。
var Hello = React.createClass({
getInitialState: function() {
return {input1: 0, input2: 0};
},
render: function() {
const total = this.state.input1 + this.state.input2;
return (
<div>{total}<br/>
<input type="text" value={this.state.input1} name="input1" onChange={this.handleChange} />
<input type="text" value={this.state.input2} name="input2" onChange={this.handleChange} />
</div>
);
},
handleChange: function(e) {
this.setState({[e.target.name]: e.target.value});
}
});
React.renderComponent(<Hello />, document.getElementById('content'));