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
ハンドラが呼ばれたときに呼ばれる。
関連
-
[解決済み] Apolloクライアントでログアウトした後、ストアをリセットする
-
[解決済み] configuration.module に未知のプロパティ 'loaders' があります。
-
[解決済み] MUI Boxは何のためのコンポーネントですか?
-
[解決済み] ReactJS: Warning: setState(...): 既存の状態遷移の間に更新することはできません
-
[解決済み] リアクトです。<tr>は<td>の子として表示できません。コメント > td > tr を参照してください。
-
[解決済み] nginxでcertbotを使用する際の問題点
-
[解決済み] react.jsで複数のモジュールをエクスポートする
-
[解決済み] Cross-envでyarnの実行時にenv変数が変更されない。
-
[解決済み] Reduxの非同期フローになぜミドルウェアが必要なのか?
-
[解決済み] ReactJSで子コンポーネントから親コンポーネントにデータを渡すには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】プリセットファイルはオブジェクトのエクスポートができない
-
[解決済み] FontAwesomeの無料パッケージに含まれているアイコンのオブジェクト名はどこにあるのですか?
-
[解決済み] マテリアルUIセレクトフィールドのマルチセレクト
-
[解決済み] jest: テストスイートの実行に失敗しました。予期しないトークンのインポート
-
[解決済み] Angular 2の*ngForのReactでの同等品
-
[解決済み] componentWillReceiveProps は名称が変更されました。
-
[解決済み] React JSでは、状態を直接変異させない、setState() react/no-direct-mutation-stateを使用する。
-
[解決済み] Cross-envでyarnの実行時にenv変数が変更されない。
-
[解決済み] componentDidUpdate'メソッドはいつ使用するのですか?
-
[解決済み] React JSXのforEach()でHTMLが出力されない