入力値の状態を親コンポーネントから子コンポーネントに渡す React メソッド

Question

配列を介してマップし、さまざまな子コンポーネントの反復を出力する親コンポーネントがあります。

親コンポーネントの状態にアクセスしようとしていますが、子コンポーネントから「inputValue」の正しい状態を抽出して親コンポーネントに配置する方法がわかりません。

理想的には、inputValue 状態と isValidated 状態の両方が親コンポーネントに存在し、さまざまなフォームベースの関数で使用できるようにしたいと考えています。

親コンポーネント:

リーリー

サブアセンブリ:

リーリー

Answer 1

最も簡単な方法は、親コンポーネントで状態を管理することです。次に、関数を prop として子コンポーネントに渡して、親コンポーネントの状態を更新するだけです。これは、関連する質問に対する私の以前の回答の例であり、子コンポーネントから親コンポーネントにデータを渡す方法を示しています。 この種のプロップドリルは、直接の子コンポーネントでのみ適切であることに注意してください。親コンポーネントと子コンポーネント間の階層関係が拡張される場合は、コンテキスト/状態管理の方が適しています。