[React.js] - パート7: React Forms
Ace Lennox
ReactのフォームはHTMLのフォームに似ていますが、状態管理とイベントハンドラーを使用することで、より柔軟かつ制御可能です。このガイドでは、Reactでのフォーム操作を実践的な例を使って説明します。
1. Reactでフォームを追加する
Reactでは、フォームをHTMLと同じように作成できます。
例: シンプルなフォーム
function MyForm() {
return (
<form>
<label>
名前を入力してください:
<input type="text" />
</label>
</form>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<MyForm />);
このフォームは機能しますが、送信するとページがリフレッシュされます。Reactでは、このデフォルトの動作を防ぎ、フォーム送信をReactで制御するのが一般的です。
2. コントロールされたコンポーネント
Reactでは、入力要素の値が状態によって管理されるコントロールされたコンポーネントが一般的です。useStateフックを使用して、入力値を追跡し、アプリケーション全体の「単一の情報源」として機能させます。
例: 入力値の状態を管理
import { useState } from "react";
import ReactDOM from "react-dom/client";
function MyForm() {
const [name, setName] = useState("");
return (
<form>
<label>
名前を入力してください:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
</form>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<MyForm />);
3. フォーム送信の処理
onSubmitイベントを使用してフォーム送信を処理し、デフォルトのブラウザ動作を防ぐことができます。
例: フォーム送信の処理
import { useState } from "react";
import ReactDOM from "react-dom/client";
function MyForm() {
const [name, setName] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
alert(`入力された名前: ${name}`);
};
return (
<form onSubmit={handleSubmit}>
<label>
名前を入力してください:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<button type="submit">送信</button>
</form>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<MyForm />);
4. 複数の入力フィールド
複数の入力フィールドを処理する場合、状態をオブジェクトとして初期化します。各入力フィールドにname属性を設定し、イベントハンドラーで動的に状態を更新します。
例: 複数の入力フィールドを持つフォーム
import { useState } from "react";
import ReactDOM from "react-dom/client";
function MyForm() {
const [inputs, setInputs] = useState({});
const handleChange = (e) => {
const { name, value } = e.target;
setInputs((prev) => ({ ...prev, [name]: value }));
};
const handleSubmit = (e) => {
e.preventDefault();
alert(JSON.stringify(inputs));
};
return (
<form onSubmit={handleSubmit}>
<label>
名前を入力してください:
<input
type="text"
name="username"
value={inputs.username || ""}
onChange={handleChange}
/>
</label>
<label>
年齢を入力してください:
<input
type="number"
name="age"
value={inputs.age || ""}
onChange={handleChange}
/>
</label>
<button type="submit">送信</button>
</form>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<MyForm />);
5. Textarea
Reactでは、<textarea>の値はvalue属性で設定されます。
例: コントロールされたTextarea
import { useState } from "react";
import ReactDOM from "react-dom/client";
function MyForm() {
const [textarea, setTextarea] = useState("デフォルトの内容");
const handleChange = (e) => {
setTextarea(e.target.value);
};
return (
<form>
<textarea value={textarea} onChange={handleChange} />
</form>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<MyForm />);
6. Selectドロップダウン
Reactでは、ドロップダウンリストの選択値はvalue属性で管理されます。
例: コントロールされたSelect
import { useState } from "react";
import ReactDOM from "react-dom/client";
function MyForm() {
const [selectedCar, setSelectedCar] = useState("トヨタ");
const handleChange = (e) => {
setSelectedCar(e.target.value);
};
return (
<form>
<select value={selectedCar} onChange={handleChange}>
<option value="トヨタ">トヨタ</option>
<option value="ホンダ">ホンダ</option>
<option value="フォード">フォード</option>
</select>
</form>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<MyForm />);
ベストプラクティス
コントロールされたコンポーネントを使用する: 入力値を状態で管理し、制御を簡単にします。
動的な状態更新:
[name]を使用して複数の入力フィールドを処理します。送信を適切に処理する: デフォルトの動作を防ぎ、データをプログラム的に処理します。
まとめ
Reactのフォームは、状態とイベントハンドラーを使用することで、シンプルかつ柔軟に管理できます。単一の入力、複数のフィールド、または<textarea>や<select>のような複雑な要素でも、Reactを使用すれば効率的に処理できます。
これらの例を試して、Reactでのフォーム操作をマスターしましょう！
ソースコード
このプロジェクトの完全なソースコードはGitHubで利用可能です。