背景

一つのコンポーネントで複数のinputタグがある時に、以下の例のようにそれぞれに対して別々のonChange関数をbindしていました。
2つ、3つとかなら良いのですが、inputの数が増えると冗長ですし、すごく頭が悪くなりそうな感じがしてました。

例：改善前

const InputName = React.createClass({
　　/* firstName用のonChange関数をbind */
    onChangeFirstName(e) {
        this.setState({ firstName: e.target.value });
    },
    /* familyName用のonChange関数をbind */
    onChangeFamilyName(e) {
        this.setState({ familyName: e.target.value });
    },
    render() {
        return (
            <div>
                <input type="text" value={this.state.firstName} onChange={this.onChangeFirstName.bind(this)} />
                <input type="text" value={this.state.familyName} onChange={this.onChangeFamilyName.bind(this)} />
            </div>
        );
    }
});

改善後

onChangeは一つにしたい、引数にpropertyの値を渡すとそれに応じた値をsetStateさせるようにしました。

例：改善後

const InputName = React.createClass({
    onChange(property, e) {
        // ブラケット演算子でオブジェクトを作成する
        this.setState({ [property] : e.target.value });
    },
    render() {
        return (
            <div>
                <input type="text" value={this.state.firstName} onChange={this.onChange.bind(this, 'firstName')} />
                <input type="text" value={this.state.familyName} onChange={this.onChange.bind(this, 'familyName')} />
            </div>
        );
    }
});

#感想
冗長にならなくて良いし、汎用的なので個人的には満足です。
もっと良い方法ご存知でしたら教えていただけると幸いです。

#参考
JavaScriptのオブジェクトのキーに変数の値を使うTips