背景
一つのコンポーネントで複数の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>
);
}
});
#感想
冗長にならなくて良いし、汎用的なので個人的には満足です。
もっと良い方法ご存知でしたら教えていただけると幸いです。