- はじめに この章では、Reactでのフォームとコントロールされたコンポーネントについて学びます。Reactを使って、コントロールされたコンポーネントを使った強力で効率的なフォームを作成できます。GeekとGalとの会話を通じて、フォームとコントロールされたコンポーネントがどのように連携して動作するのか理解しましょう！
Reactでは、フォームは少し違った動作をします。DOMから値を読み取る代わりに、 コントロールされたコンポーネント を使ってフォームデータを処理するのよ。
コントロールされたコンポーネントって何？
コントロールされたコンポーネントとは、Reactが状態を管理するフォーム要素で、その値はReactによって制御されるの！
- コントロールされたコンポーネント
コントロールされたコンポーネントを作成するには、入力要素の
value
属性を対応する状態プロパティに設定し、その状態を更新するための
onChange
イベントハンドラを追加する必要があるわ。
例を見せてもらえる？
もちろん！これが、コントロールされた入力コンポーネントを持つシンプルなフォームの例よ：
import React, { useState } from 'react';
function NameForm() {
const [name, setName] = useState('');
function handleChange(event) {
setName(event.target.value);
}
function handleSubmit(event) {
event.preventDefault();
alert('Hello, ' + name + '!');
}
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" value={name} onChange={handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
なるほど！入力の値はReactの状態によって制御されていて、ユーザーが入力すると更新されるんだね。
そのとおり！
handleChange
関数が状態を更新し、フォームの送信は
handleSubmit
関数で処理されるのよ。
- 面白い例
フォームとコントロールされたコンポーネントの面白い例はある？
もちろん！お気に入りのジョークを聞くフォームを作ってみましょう！
import React, { useState } from 'react';
function JokeForm() {
const [joke, setJoke] = useState('');
function handleChange(event) {
setJoke(event.target.value);
}
function handleSubmit(event) {
event.preventDefault();
alert('Your favorite joke is: "' + joke + '" 😂');
}
return (
<form onSubmit={handleSubmit}>
<label>
Favorite Joke:
<input type="text" value={joke} onChange={handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
ハハ、素晴らしい！お気に入りのジョークを送信するためのフォームだね。それにコントロールされたコンポーネントだ！
そうなの！コントロールされたコンポーネントを使うと、Reactでフォームデータを簡単に管理できるのよ。
- おわりに Reactのフォームとコントロールされたコンポーネントは、フォームデータを処理するための強力で効率的な方法を提供してくれます。コントロールされたコンポーネントを使うことで、フォーム要素の状態を簡単に管理し、コードをきれいで保守性の高い状態に保つことができます。コントロールされたコンポーネントを使うと、Reactでフォームデータを簡単に扱えることを覚えておいてくださいね！😄