[tsx]子コンポーネントから親コンポーネントへ

Sample.tsx

//### 親コンポーネント

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

const ParentComponent: React.FC = () => {
    const [data, setData] = useState<string>('');

    const handleDataFromChild = (childData: string) => {
        setData(childData);
    };

    return (
        <div>
            <h1>親コンポーネント</h1>
            <p>子から受け取ったデータ: {data}</p>
            <ChildComponent onSendData={handleDataFromChild} />
        </div>
    );
};

export default ParentComponent;


//## 子コンポーネント


import React from 'react';

interface ChildComponentProps {
    onSendData: (data: string) => void;
}

const ChildComponent: React.FC<ChildComponentProps> = ({ onSendData }) => {
    const sendData = () => {
        const dataToSend = 'こんにちは、親コンポーネント！';
        onSendData(dataToSend);
    };

    return (
        <div>
            <h2>子コンポーネント</h2>
            <button onClick={sendData}>データを親に送る</button>
        </div>
    );
};

export default ChildComponent;

//### 説明
/**

1. **親コンポーネント** (`ParentComponent`):
   - `useState`フックを使って、子コンポーネントから受け取ったデータを保存するための`data`という状態を管理します。
   - `handleDataFromChild`関数を定義し、これを子コンポーネントに`onSendData`というプロパティ名で渡します。関数の引数として子コンポーネントから送られてくるデータを受け取ります。

2. **子コンポーネント** (`ChildComponent`):
   - `onSendData`プロパティを介して受け取った関数を使用します。
   - `sendData`関数を定義し、ボタンがクリックされるとこの関数が呼び出され、固定の文字列（または動的なデータ）を`onSendData`関数に渡します。これにより、親コンポーネントの`handleDataFromChild`が呼び出され、親コンポーネントの状態が更新します。

このようにして、子から親へデータを渡すことができます。必要に応じて、データの型を定義することを忘れないようにしましょう。
**/