[解決済み] React.js：1つのonChangeハンドラで異なる入力を識別する

質問

どのようにアプローチするのが正しいのか気になる。

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関数を作成することもできますが、それはあまり良いことではありません。 同様に、個々の入力のためだけにコンポーネントを作成することもできますが、私はこのような方法があるかどうかを確認したかったのです。

解決方法は？

のような標準的なHTML属性に固執することをお勧めします。 name で input 要素で、入力を識別します。また、"total"はstateに他の値を追加することで合成可能なので、stateに別の値として保持する必要はない。

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