Reactで子コンポーネントから親にデータを渡す

React は、複数の理由から最も人気のあるフロントエンド ライブラリです。 コンポーネントの再利用性は、React の最大の利点の 1つです。

ライブラリを使用すると、Web アプリケーションを非常に小さなコードに分割し、それぞれに機能とデザインを持たせることができます。 次に、これらの小さなコンポーネントを使用して、より大きなコンポーネントを構築できます。

React アプリケーションは基本的にコンポーネント ツリーであり、最上位に親コンポーネントがあります。 コンポーネントの再利用性は非常に重要であるため、React コンポーネント間でデータを共有する方法が必要です。

Reactで子コンポーネントから親にデータを渡す

React では、信頼できる唯一の情報源 (通常はツリーの最上部にあるコンポーネント) を持つことをお勧めします。 React 開発者は props オブジェクトを使用して、親から子にデータを手動で渡すことができます。

子コンポーネントは、渡された値にアクセスし、それを子に渡すことができます。 このようにして、親コンポーネントからのデータをコンポーネント ツリーの複数のレベルに渡すことができます。

子のコンポーネントには、テキスト フィールド、チェックボックス、ラジオ、ドロップダウンなどの入力要素が含まれる場合があります。 入力要素の値を保存する場合は、これらの値を子のコンポーネントから親に取得する必要があります。

親コンポーネントは props を使用してコールバック関数を子に渡すことができます。 つまり、親コンポーネントで関数 (通常はイベント ハンドラー) を定義し、それをコールバック関数として渡すことができます。

要するに、コールバック関数を使用して子コンポーネントのイベントを処理し、入力要素からの値を引数として、prop として渡されたコールバック関数に渡すことができます。 関数が実行され、親コンポーネントの状態が更新されます。

この例を見てみましょう。

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [name, setName] = useState("");
  console.log(name);
  const handleChange = (e) => setName(e.target.value);
  return (
    <div className="App">
      <Input handler={handleChange}></Input>
    </div>
  );
}
function Input(props) {
  return (
    <div className="App">
      <p>Enter the name</p>
      <input type="text" onChange={(e) => props.handler(e)}></input>
    </div>
  );
}

ライブ デモ は、コールバックが子コンポーネントで呼び出されることを示していますが、親コンポーネントで実行され、その状態が更新されます。

useState() フックを呼び出して name 状態変数を空の文字列に初期化する基本的な例です。 それを更新するための setName 関数も作成します。

handlechange 関数は 1つの引数 (合成イベント) を取り、現在の値をテキスト ボックスの name 状態変数に渡します。 イベント ハンドラーは、親コンポーネントでは呼び出されません。

そこで定義されていますが、子 Input 要素に handler prop として渡され、そこで呼び出されます。

親コンポーネントで console.log() 関数を呼び出して状態変数をログアウトします。 状態変数の値が更新されていることがコンソールに表示されます。