入力フォームの双方向バインディング

4日 ago

user

1 minute

入力欄（input）と状態（state）を連動させることで、画面とロジックの整合性を保ちながら、入力内容を即座に取得・利用できるようにする仕組みが「双方向バインディング」です。

基本的な例

import { useState } from "react";

export const TwoWayBinding = () => {
  const [text, setText] = useState("");

  const handleChange = (e: React.ChangeEvent
<HTMLInputElement>) => {
    setText(e.target.value);
  };

  return (

<div>
      <input value={text} onChange={handleChange} />

<p>入力中の値: {text}</p>
    </div>
  );
};

解説

useState によって text を状態として管理します。
input の value に text を設定することで、Reactのstateが入力欄の見た目に反映されます。
onChange イベントで入力のたびに setText を実行することで、入力内容が常に状態に反映されます。
このように「入力値 ⇔ state」が同期している状態が 双方向バインディング です。

利点

状態の変化をもとに、画面やロジックを柔軟に制御できる。
入力値のバリデーションや条件付きレンダリングとの親和性が高い。
コンポーネント内での状態の一貫性を保てる。

補足：数値・チェックボックス・テキストエリアの場合

<input
  type="number"
  value={age}
  onChange={(e) => setAge(Number(e.target.value))}
/>

<input
  type="checkbox"
  checked={isChecked}
  onChange={(e) => setIsChecked(e.target.checked)}
/>

<textarea
  value={description}
  onChange={(e) => setDescription(e.target.value)}
/>

type="number" や checkbox は value ではなく checked プロパティを使う点に注意が必要です。