Reactで子から親へ値を渡す方法

Reactで子から親へ値を渡す方法

Reactで子コンポーネントから親コンポーネントに値を渡すには、親コンポーネントがコールバック関数を作成し、それを子コンポーネントに引数(props)として渡す方法が一般的です。
Reduxなどを使用してグローバルステートで管理もできますが、今回はコンポーネントの階層を通してバケツリレーをする方式です。

以下はその具体例です。

コード例

Parent.tsx

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

const Parent: React.FC = () => {

  // 子コンポーネントから受け取った値を格納するstate
  const [value, setValue] = useState<string>('');

  // 子コンポーネントから受け取った値を親コンポーネントのstateに格納
  const handleValueChange = (newValue: string) => {
    setValue(newValue);
  };

  return (
    <div>
      <p>子コンポーネントから渡された値: {value}</p>
      <Child onValueChange={handleValueChange} />
    </div>
  );
};

export default Parent;

Child.tsx

import React, { useState } from 'react';

interface ChildProps {
  // 親コンポートから渡されたコールバック関数
  onValueChange: (value: string) => void;
}

const Child: React.FC<ChildProps> = ({ onValueChange }) => {
  const [inputValue, setInputValue] = useState<string>('');

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value;
    setInputValue(newValue);
    // 親コンポーネントのコールバック関数に引数を渡して実行
    onValueChange(newValue);
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
      />
    </div>
  );
};

export default Child;

説明

1. Parent.tsx

• handleValueChange 関数を定義し、これを子コンポーネントに引数(props)として渡します。
• value ステートを管理し、子コンポーネントからの値を表示します。

2. Child.tsx

• onValueChangeを受け取り、入力が変更されたときに親コンポーネントに新しい値を渡します。

このようにして、子コンポーネントから親コンポーネントに値を渡すことができます。