Reactで双方向バインディングを実装

Reactで双方向バインディングを実装

Reactで双方向バインディングを実装するためには、コンポーネントの状態を管理し、その状態をUIに反映し、UIの変更を状態に反映する必要があります。
以下に、TypeScriptを使用した例を示します。

ソースコード例

import React, { useState } from 'react';

interface FormData {
  name: string;
  age: number;
}

const TwoWayBindingComponent: React.FC = () => {
  const [formData, setFormData] = useState<FormData>({ name: '', age: 0 });

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: name === 'age' ? Number(value) : value,
    });
  };

  return (
    <div>
      <div>
        <label>
          名前:
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleInputChange}
          />
        </label>
      </div>
      <div>
        <label>
          年齢:
          <input
            type="number"
            name="age"
            value={formData.age}
            onChange={handleInputChange}
          />
        </label>
      </div>
      <div>
        <h3>入力内容</h3>
        <p>名前: {formData.name}</p>
        <p>年齢: {formData.age}</p>
      </div>
    </div>
  );
};

export default TwoWayBindingComponent;

この例では、useStateフックを使用してフォームデータを管理しています。
フォームの各フィールドの変更はhandleInputChange関数で処理され、状態が更新されます。
また、UIは状態に基づいて更新されます。

まとめ

• useStateフックを使用してコンポーネントの状態を管理。
• handleInputChange関数を使用して、フォームフィールドの変更を状態に反映。
• valueプロパティを使用して、状態をフォームフィールドに反映。

これで、ReactとTypeScriptを使用した双方向バインディングの基本的な実装が完了です。