1. ホーム
  2. reactjs

onChangeイベントで追加パラメータを渡す

2023-10-20 03:11:35

質問

何をしようとしているのか。

子コンポーネントから親コンポーネントのhandleChange関数に文字列を渡そうとしています。

現在動作しているもの

親となるReact JSのクラスで、以下のようなメソッドを持っています。

handleChange(event) {

    console.log(event.target.value);
}

レンダー関数では、以下のようにしています。

<Child handleChange={this.handleChange.bind(this)} />

子クラスでは

<fieldset onChange={this.props.handleChange}>
    <div>Tag 1: <input id="tag1" value={tags[0]} /></div>
    <div>Tag 2: <input id="tag2" value={tags[1]} /></div>
    <div>Tag 3: <input id="tag3" value={tags[2]} /></div>
</fieldset>

これは問題なく動作します。

代わりに私がやろうとしていること

を追加しようとしています。 section パラメータを handleChange 関数に次のように追加しようとしています。

handleChange(section, event) {
    console.log(section);
    console.log(event.target.value);
}

そして、Childクラスには

<fieldset onChange={this.props.handleChange("tags")}>
    <div>Tag 1: <input id="tag1" value={tags[0]} /></div>
    <div>Tag 2: <input id="tag2" value={tags[1]} /></div>
    <div>Tag 3: <input id="tag3" value={tags[2]} /></div>
</fieldset>

今、エラーが出ました。

Uncaught TypeError: Cannot read property 'target' of undefined

このエラーは2つ目のconsole.logステートメントで投げられています。

私は何を間違えているのでしょうか?

また section パラメータをオプションにすることも考えています。その場合、これを行う簡単な方法はあるのでしょうか?イベントパラメータが最後である必要がある場合、それは不可能であるように思えます。

どのように解決するのですか?

これを書いているとき

<fieldset onChange={this.props.handleChange("tags")}>

handleChange は、render がトリガーされるとすぐに呼び出されます。

代わりに、このようにします。

<fieldset onChange={(e) => this.props.handleChange("tags", e)}>

ここで handleChange が呼び出されるのは onChange ハンドラが呼ばれたときに呼ばれる。