React フォームの双方向バインディングの実装方法

2年 ago
海斗, 葵
1 minute

Reactにおける双方向バインディングの実装方法は以下のステップです。

  1. フォームデータの状態を管理するには、useStateフックまたはクラスコンポーネントの stateを使用します。
  2. 入力ボックスの value 属性に関連する状態値をバインドして、入力ボックスの値と状態値の一致を図ります。
  3. 入力ボックスのonChangeイベントを監視し、イベントハンドラー内で状態値を更新する。
  4. ステート値が更新されると、インプットボックスの値も連動して更新され、双方向バインディングを実現。

以下は、関数コンポーネントとuseStateを利用したフォームの双方向バインディングの例です。

import React, { useState } from 'react';
function Form() {
const [formData, setFormData] = useState({
username: '',
password: '',
});
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value,
});
};
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
/>
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
/>
<button type="submit">Submit</button>
</form>
);
}
export default Form;

先の例ではuseStateを使ってformDataという状態を定義しました。formDataはオブジェクトで、usernameとpasswordという2つのプロパティを持っています。各入力ボックスの値はvalueプロパティを通して対応する状態の値とバインドされていて、入力ボックスの値が変化するとonChangeイベントが実行され、handleChange関数を実行して状態の値を更新します。最後、フォームをサブミットした時、handleSubmit関数内でフォームのデータを出力します。

bannerAds