【React x TypeScript】子⇒親コンポーネントへ値を渡す方法

2月 5, 20232月 11, 2023

Reactにて親⇒子コンポーネントへの値渡しはそこまで難しくはないですが、子⇒親コンポーネントへの値渡しは少しだけ頭を捻る必要があった ( 慣れてる人には当たり前かもしれませんが… ) ので備忘録として残していきます。

1. 子⇒親コンポーネントへ値を渡す方法

子⇒親コンポーネントへ値を渡す方法

今回使用した環境

インターネット接続可能のオンラインの環境

64 ビットオペレーティングシステム

Windows 10 22H2

Node: 16.15.0
react-dom@18.2.0
react-scripts@5.0.1
react@18.2.0
typescript@4.9.4

ソース

親コンポーネント「Parent.tsx」と子コンポーネント「Child.tsx」を用意して、親コンポーネントの中に子コンポーネントを表示しています。

13行目の「 setParentText={setParentText} 」がキモですね。コールバック関数としてsetParentTextを子コンポーネントに渡しています。

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

const Parent = () => {

  const [parentText, setParentText] = useState<string>("");

  return (
    <div style={{backgroundColor: 'teal', padding: 10}}>
      <p>Parentコンポーネント</p>
      Childコンポーネントで入力された値：{parentText}
      <Child
        setParentText={setParentText}
      />
    </div>
  );
};
export default Parent;

そして6行目で、子コンポーネントからsetParentTextを呼び出すことで親コンポーネントに対し、子コンポーネントで入力された値をセットします。

import { ChangeEvent } from "react";

const Child = (props: {setParentText:(parentText: string) => void}) => {

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    props.setParentText(event.target.value);
  };

  return (
    <div style={{backgroundColor: 'firebrick'}}>
      <p>Childコンポーネント</p>
      <input type="text" onChange={(event) => handleChange(event)} />
    </div>
  );
};
export default Child;

補足ですが、3行目の引数propsをany型としたくなかったので「 (props: {setParentText:(parentText: string) => void}) 」のようにし、setParentTextの関数の型として定義しています。