- はじめに このセクションでは、Reactでのフォームの使用について学びます。コントロールされたコンポーネントを使ってReactでフォームを作成・管理する方法に焦点を当てます。GeekとGalの会話を通して、Reactアプリケーションでフォームを使うプロセスを探っていきましょう！
Reactでは、コントロールされたコンポーネントを使ってフォームが作成されるのよ。これによって、フォームのデータとバリデーションを管理しやすくなるわ。
Reactでフォームを作るにはどうすればいいの？
いい質問ね！まず、入力フィールドと送信ボタンがあるフォーム要素を作成するの。次に、入力フィールドの状態を管理し、フォームの送信を処理するイベントハンドラを追加するわ。
- フォームの作成
テキスト入力フィールドと送信ボタンがある簡単なフォームを作ってみましょう。入力値を管理するためのstate変数と、stateを更新するイベントハンドラも追加するわ。
いいね！コードを見せて！
Reactで簡単なフォームを作成するためのコードはこちらよ：
import React, { useState } from 'react';
function SimpleForm() {
const [inputValue, setInputValue] = useState('');
function handleChange(event) {
setInputValue(event.target.value);
}
function handleSubmit(event) {
event.preventDefault();
alert('You entered: ' + inputValue);
}
return (
<form onSubmit={handleSubmit}>
<label>
Enter something:
<input type="text" value={inputValue} onChange={handleChange} />
</label>
<button type="submit">Submit</button>
</form>
);
}
なるほど！入力フィールドがあるフォーム要素、入力値を管理するためのstate変数、stateを更新しフォームの送信を処理するイベントハンドラがあるんだね。
そのとおり！Reactが入力フィールドの値を管理し、ユーザーが入力すると更新されるわ。
- おもしろい例
Reactでフォームを使った面白い例はある？
もちろん！お気に入りの動物の鳴き声を送信できるフォームを作ってみましょう！
import React, { useState } from 'react';
function AnimalSoundForm() {
const [sound, setSound] = useState('');
function handleChange(event) {
setSound(event.target.value);
}
function handleSubmit(event) {
event.preventDefault();
alert('Your favorite animal sound is: ' + sound + '! 🐶🐱🦁');
}
return (
<form onSubmit={handleSubmit}>
<label>
Favorite Animal Sound:
<input type="text" value={sound} onChange={handleChange} />
</label>
<button type="submit">Submit</button>
</form>
);
}
ハハ、すごいね！Reactでお気に入りの動物の鳴き声を送信するフォームが作れるんだ！
その通り！コントロールされたコンポーネントを使ってReactでフォームを使うことで、フォームデータの管理がずっと簡単で楽しくなるわ！
- おわりに
Reactでのフォームの使用を使うことで、コントロールされたコンポーネントを活用して効率的にフォームを作成・管理できます。コントロールされたコンポーネントを使うことで、フォーム要素の状態を管理し、コードをきれいで保守性の高い状態に保つことができます。覚えておいてください、Reactはフォームを使うのがシンプルで楽しいです！🎉