1. 関数をPropsで渡す基本

Reactでは、Propsを使って文字や数値を渡すだけでなく、関数を渡すこともできます。これにより、子コンポーネントは「ボタンが押されたよ！」と親コンポーネントに知らせることができます。


type ButtonProps = {
  onClick: () => void;
};

function CustomButton({ onClick }: ButtonProps) {
  return <button onClick={onClick}>クリック</button>;
}

function App() {
  const handleClick = () => {
    alert("ボタンが押されました！");
  };

  return (
    <div>
      <CustomButton onClick={handleClick} />
    </div>
  );
}

（画面に「クリック」と書かれたボタンが表示され、押すとアラートで「ボタンが押されました！」と表示されます）

2. 型定義のポイント

型定義では「関数がどんな引数を受け取り、どんな値を返すか」を書きます。例えば、引数がなく戻り値もない場合は() => voidと定義します。

もし文字列を受け取って何も返さない関数なら、(text: string) => voidとします。

3. 引数つき関数をPropsで渡す

関数には引数を設定できます。例えば「入力した名前を親に渡す」ようなケースです。


type InputProps = {
  onSend: (value: string) => void;
};

function TextInput({ onSend }: InputProps) {
  return (
    <input
      type="text"
      onChange={(e) => onSend(e.target.value)}
      placeholder="名前を入力"
    />
  );
}

function App() {
  const handleSend = (value: string) => {
    console.log("入力された名前:", value);
  };

  return (
    <div>
      <TextInput onSend={handleSend} />
    </div>
  );
}

（入力欄に文字を入力すると、その内容がコンソールに表示されます）

4. 複数の引数を持つ関数

Propsの関数は複数の引数も受け取れます。例えば「ユーザー名」と「年齢」を渡すような場合です。


type UserFormProps = {
  onSubmit: (name: string, age: number) => void;
};

function UserForm({ onSubmit }: UserFormProps) {
  return (
    <button onClick={() => onSubmit("太郎", 20)}>
      ユーザー送信
    </button>
  );
}

function App() {
  const handleUserSubmit = (name: string, age: number) => {
    alert(`${name} (${age}歳) が送信されました！`);
  };

  return (
    <div>
      <UserForm onSubmit={handleUserSubmit} />
    </div>
  );
}

（ボタンを押すと「太郎 (20歳) が送信されました！」とアラートに表示されます）