先生と生徒の会話形式で理解しよう

生徒

「Reactでフォームを作ったのですが、入力した内容を別の画面でも使いたいです」

先生

「それなら、子コンポーネントから親コンポーネントへデータを渡す方法を覚える必要がありますね」

生徒

「フォームは子に書いているのに、どうやって親に渡すんですか？」

先生

「Reactでは、関数を使ってデータを受け渡しします。順番に見ていきましょう」

1. 親コンポーネントと子コンポーネントの関係

Reactでは、画面を小さな部品に分けて作ります。この部品のことをコンポーネントと呼びます。その中で、他のコンポーネントを呼び出している側を親コンポーネント、呼び出されている側を子コンポーネントと言います。

例えるなら、親は家全体、子は部屋のような関係です。親は全体を管理し、子は一部分の役割を担当します。

2. フォームデータを親に渡す基本の考え方

Reactでは、データは基本的に親から子へ渡します。しかし、フォーム入力のように「子で入力した内容を親で使いたい」場面も多くあります。

その場合、親で用意した関数を子に渡し、子がその関数を呼び出すことでデータを親に伝えます。これは、子が親に電話をかけて報告するようなイメージです。

3. 親コンポーネントで受け取り準備をする

まずは、親コンポーネントでフォームデータを受け取るための状態を用意します。そして、その状態を更新する関数を子に渡します。


import React, { useState } from "react";
import ChildForm from "./ChildForm";

function App() {
  const [userName, setUserName] = useState("");

  return (
    <div>
      <h1>親コンポーネント</h1>
      <p>受け取った名前：{userName}</p>
      <ChildForm onSendName={setUserName} />
    </div>
  );
}

export default App;

（子コンポーネントから受け取った名前が画面に表示されます）

4. 子コンポーネントでフォームを作成する

次に、子コンポーネント側でフォームを作ります。入力された値を、親から渡された関数に渡すことで、親へデータを送ります。


import React, { useState } from "react";

function ChildForm(props) {
  const [name, setName] = useState("");

  const handleSubmit = () => {
    props.onSendName(name);
  };

  return (
    <div>
      <h2>子コンポーネント</h2>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button onClick={handleSubmit}>送信</button>
    </div>
  );
}

export default ChildForm;

（入力して送信ボタンを押すと、親の表示が更新されます）

5. フォーム送信時にまとめてデータを渡す方法

実際のフォームでは、名前やメールアドレスなど、複数の項目を扱います。その場合は、オブジェクトという箱にまとめて渡すと便利です。オブジェクトとは、複数の情報を一つにまとめた入れ物のことです。


import React, { useState } from "react";

function ChildForm(props) {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  const handleSubmit = () => {
    props.onSubmit({
      name: name,
      email: email
    });
  };

  return (
    <div>
      <input
        type="text"
        placeholder="名前"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="email"
        placeholder="メール"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button onClick={handleSubmit}>送信</button>
    </div>
  );
}

export default ChildForm;

6. 親コンポーネントで複数データを受け取る

子からまとめて送られたデータは、親で一つずつ使うことができます。これにより、入力内容を一覧表示したり、別の処理に使ったりできます。


import React, { useState } from "react";
import ChildForm from "./ChildForm";

function App() {
  const [formData, setFormData] = useState({});

  return (
    <div>
      <h1>入力結果</h1>
      <p>名前：{formData.name}</p>
      <p>メール：{formData.email}</p>
      <ChildForm onSubmit={setFormData} />
    </div>
  );
}

export default App;

（送信すると、名前とメールが親側に表示されます）