【React】テキストエリアコンポーネントから親コンポーネントにフォームの内容を渡す

子コンポーネントから親コンポーネントに対して値を渡す記事そのものは多少あるのですが、テキストエリア内の値の受け渡し方法というのは、あんまり見受けられなかったため個人用の備忘録です。

parent.tsx(Signup.tsx)

const Signup: React.FC = () => {
  const [email, setEmail] = useState("");

  return (
    <div>
      <Textbox
        placeholder="email"
        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
          setEmail(event.target.value)
        }
      />

      {email}
    </div>
  );
};

parent.tsx内ではTextboxコンポーネントにonChange関数を渡しています。帰ってきた値をReactHooksのstateに値を格納しています。

children.tsx(Textbox.tsx)

interface Props {
  placeholder: string;
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

const Textbox: React.FC<Props> = ({ placeholder, onChange }) => {

  return (
    <input
      type="text"
      placeholder={placeholder}
      onChange={onChange}
    />
  );
};

ここではPropsにonChange関数の型の定義をした後、テキストエリア内で変更があったらそのまま親コンポーネントのonChange関数を発火させるようになっています。