3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Reactで複数のinputタグがある時に、それぞれonChange関数を用意するのではなく、汎用的なonChange関数にする

Last updated at Posted at 2017-06-20

背景

一つのコンポーネントで複数の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

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?