【React】子から親の関数を実行する方法＆子から親に値を渡す方法を解説！

Reactで開発をしていると、「子コンポーネントから親コンポーネントに何か伝えたい！」という場面に出くわすことがあります。たとえば、以下のようなケースです。

  • 子コンポーネントでボタンを押したら、親コンポーネントの関数を実行したい
  • 子コンポーネントの入力欄に文字を入力したら、その値を親コンポーネントで表示したい

この記事では、Reactで子から親へ情報を渡す方法について、以下の2つの内容をサンプルコードを用いてわかりやすく解説します。

  • 子から親のメソッド（関数）を実行する方法
  • 子から親に値を渡す方法

子から親のメソッド（関数）を実行する方法

子から親のメソッド（関数）を実行するためには、親から子にpropsで関数を渡し、子からその関数を呼び出します。

手順を以下に示します。

  • 親コンポーネント：実行したい関数Aを定義する
  • 親コンポーネント：関数Aをprops経由で子コンポーネントに渡す
  • 子コンポーネント：props経由で受け取った関数Aを呼び出す

この3ステップで、子から親のメソッド（関数）を実行することができます。

では実際にサンプルコードを見てみましょう。

親コンポーネント（Parent.js）

import Child from './Child';

const Parent = () => {
  // 1. 実行したい関数Aを定義する
  const handleButtonClick = () => {
    alert('親のメソッド（関数）が実行されました！');
  };

  return (
    <>
      {/* 2. 関数Aをprops経由で子コンポーネントに渡す */}
      <Child onButtonClick={handleButtonClick} />
    </>
  );
};

export default Parent;

子コンポーネント（Child.js）

// 3. props経由で受け取った関数Aを呼び出す（例：ボタンのイベントで実行している）
const Child = (props) => {
  return (
    <>
      <button onClick={props.onButtonClick}>
        親のメソッド（関数）を実行する
      </button>
    </>
  );
};

export default Child;

親から子に関数を渡すときには、親で定義した関数名handleButtonClickを、子に渡すときにonButtonClickという名前で渡しています。

これは、Reactの慣習として「イベントハンドラとして渡す関数はon〜という名前にする」ことが多いためです。このように、親では「handle〜（処理する）」、子では「on〜（イベント的に呼び出す）」と命名することで、役割を明確にしています。

実行結果

子コンポーネントのボタンをクリックすると、親で定義したメソッド（関数）が呼び出され、アラートが表示されます。子からのメソッド（関数）を実行していることを確認できました。

propsの分割代入を使った場合

propsの分割代入を使うと、子コンポーネントは以下のように書くこともできます。

// 3. props経由で受け取った関数Aを呼び出す（例：ボタンのイベントで実行している）
const Child = ({ onButtonClick }) => {
  return (
    <>
      <button onClick={onButtonClick}>
        親のメソッド（関数）を実行する
      </button>
    </>
  );
};

export default Child;

この書き方では、propsオブジェクトからonButtonClickだけを直接抜き出して使っています。

// 3. props経由で受け取った関数Aを呼び出す（例：ボタンのイベントで実行している）
const Child = (props) => {
  const { onButtonClick } = props;
  return (
    <>
      <button onClick={onButtonClick}>
        親のメソッド（関数）を実行する
      </button>
    </>
  );
};

export default Child;

このパターンでは、まず引数としてpropsを受け取り、関数の中で分割代入しています。

子から親に値を渡す方法

Reactでは、基本的にデータの流れは「親 → 子」ですが、実際には「子 → 親」にデータを渡したいこともあります。たとえば、以下のようなケースです。

  • 子コンポーネントで入力された文字列を、親で管理・表示したい
  • 子コンポーネントでイベントが発生したときに、その内容を親に知らせたい

この場合の手順を以下に示します。

  • 親コンポーネント：StateとStateを更新するSet関数を定義する
  • 親コンポーネント：1で作成したSet関数を呼び出す関数Aを定義する
  • 親コンポーネント：関数Aをprops経由で子コンポーネントに渡す
  • 子コンポーネント：propsで受け取った関数Aを呼び出す

この4ステップで、子から親に値を渡すことができます。

では実際にサンプルコードを見てみましょう。

親コンポーネント（Parent.js）

import { useState } from 'react';
import Child from './Child';

const Parent = () => {
  // 1. StateとStateを更新するSet関数を定義する
  const [text, setText] = useState('');

  // 2. 1で作成したSet関数を呼び出す関数Aを定義する
  const handleValueChange = (newValue) => {
    setText(newValue);
  };

  return (
    <>
      {/* 3. 関数Aをprops経由で子コンポーネントに渡す */}
      <Child onChangeText={handleValueChange} />

      {/* 現在のtextの内容を表示 */}
      <h1>{text}</h1>
    </>
  );
};

export default Parent;

子コンポーネント（Child.js）

// 4. propsで受け取った関数Aを呼び出す（例：文字を入力すると呼び出される）
const Child = (props) => {
  const handleInputChange = (event) => {
    const value = event.target.value;
    props.onChangeText(value); // ← ここで呼び出している
  };

  return (
    <>
      <input 
        type="text" 
        placeholder="ここに入力してみてください" 
        onChange={handleInputChange} 
      />
    </>
  );
};

export default Child;

親から子に関数を渡すときには、親で定義した関数名handleValueChangeを、子に渡すときにonChangeTextという名前で渡しています。

実行結果

子の入力欄に文字を入力すると、その内容が親のStateに渡され、<h1>に表示されます。子から親に値を渡していることを確認できました。

set関数を直接渡した場合

親から子に関数を渡す際、以下のようにSet関数（setText)をそのまま渡すことも可能です。

<Child onChangeText={setText} />

また、処理を挟みたいときは、以下のように無名関数（アロー関数）でラップして渡すこともできます。

<Child onChangeText={(v) => setText(v)} />

たとえば、前処理を加えたい場合は次のように書けます。

<Child onChangeText={(v) => setText(v.trim())} />
<Child onChangeText={(v) => {
  console.log("受け取った値:", v);
  setText(v);
}} />

本記事のまとめ

今回は、Reactで子から親へ情報を渡す方法について、2つのパターンを紹介しました。

  • 子から親のメソッド（関数）を実行する方法
  • 子から親に値を渡す方法

Reactでは、データの流れは「親 → 子」が基本ですが、今回のように親から渡した関数を子が呼び出すことで、子 → 親の通信も実現できます。この考え方を理解すれば、複雑なコンポーネント間のやり取りもシンプルに整理できるようになります。

ぜひ実際の開発でも活用してみてください！

スポンサーリンク