HTMLと同様に、Reactはフォームを使用して、ユーザーがWebページとやりとりできるようにします。
Reactにフォームを追加する
他の要素と同じように、Reactでフォームを追加します。
例：
ユーザーが自分の名前を入力できるフォームを追加します。
function MyForm() {
return (
<form>
<label>Enter your name:
<input type="text" />
</label>
</form>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);
実行例(開発準備中) »
これで機能し、フォームが送信されページが更新されます。
ですが、これはReactで実現したいことではありません。
このデフォルトの動作を防ぎ、Reactにフォームを制御させたいからです。
フォームの処理
フォームの処理とは、値が変更されたときや送信されたときにデータを処理する方法に関するものです。
HTMLでは通常、フォームデータはDOMによって処理されます。
Reactでは通常、フォームデータはコンポーネントによって処理されます。
データがコンポーネントによって処理される場合、すべてのデータはコンポーネントの状態に格納されます。
onChange属性にイベントハンドラーを追加することで、変更を制御できます。
useStateフックを使用すると、各入力値を追跡し、アプリケーション全体に「唯一の信頼できる情報源」を提供できます。
例：
フックを使用してuseState入力を管理します。
import { useState } from 'react';
import ReactDOM from 'react-dom/client';
function MyForm() {
const [name, setName] = useState("");
return (
<form>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
</form>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);
実行例(開発準備中) »
フォームの送信
<form>のonSubmit属性にイベントハンドラーを追加することで、送信アクションを制御できます。
例：
onSubmit属性に送信ボタンとイベントハンドラーを追加します。
import { useState } from 'react';
import ReactDOM from 'react-dom/client';
function MyForm() {
const [name, setName] = useState("");
const handleSubmit = (event) => {
event.preventDefault();
alert(The name you entered was: ${name})
}
return (
<form onSubmit={handleSubmit}>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<input type="submit" />
</form>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);
実行例(開発準備中) »
複数の入力フィールド
name各要素に属性を追加することで、複数の入力フィールドの値を制御できます。
空のオブジェクトで状態を初期化します。
イベントハンドラーのフィールドにアクセスするには、event.target.nameとevent.target.value構文を使用します。
状態を更新するには、プロパティ名を角括弧[括弧表記]で囲みます。
例：
2つの入力フィールドを持つフォームを作成します。
import { useState } from 'react';
import ReactDOM from 'react-dom/client';
function MyForm() {
const [inputs, setInputs] = useState({});
const handleChange = (event) => {
const name = event.target.name;
const value = event.target.value;
setInputs(values => ({...values, [name]: value}))
}
const handleSubmit = (event) => {
event.preventDefault();
alert(inputs);
}
return (
<form onSubmit={handleSubmit}>
<label>Enter your name:
<input
type="text"
name="username"
value={inputs.username || ""}
onChange={handleChange}
/>
</label>
<label>Enter your age:
<input
type="number"
name="age"
value={inputs.age || ""}
onChange={handleChange}
/>
</label>
<input type="submit" />
</form>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);
実行例(開発準備中) »
ノート：両方の入力フィールドに同じイベントハンドラー関数を使用します。それぞれに1つのイベントハンドラーを記述できますが、これによりコードがよりクリーンになり、Reactで推奨される方法になります。
テキストエリア
Reactのtextarea要素は、通常のHTMLとは少し異なります。
HTMLでは、textareaの値は開始タグ<textarea>と終了タグ</textarea>の間のテキストでした。
<textarea>
Content of the textarea.
</textarea>
Reactでは、テキストエリアの値はvalue属性に配置されます。フックを使用してuseStatetextareaの値を管理します。
例：
いくつかのコンテンツを含む単純なテキストエリア:
import { useState } from 'react';
import ReactDOM from 'react-dom/client';
function MyForm() {
const [textarea, setTextarea] = useState(
"The content of a textarea goes in the value attribute"
);
const handleChange = (event) => {
setTextarea(event.target.value)
}
return (
<form>
<textarea value={textarea} onChange={handleChange} />
</form>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);
実行例(開発準備中) »
選択する
Reactのドロップダウンリストまたは選択ボックスも、HTMLとは少し異なります。
HTMLでは、ドロップダウンリストで選択された値は次のselected属性で定義されていました。
HTML:
<select>
<option value="Ford">Ford</option>
<option value="Volvo" selected>Volvo</option>
<option value="Fiat">Fiat</option>
</select>
Reactでは、選択された値はselectタグのvalue 属性で定義されます。
例：
単純な選択ボックス。選択された値「Volvo」がコンストラクターで初期化されます。
function MyForm() {
const [myCar, setMyCar] = useState("Volvo");
const handleChange = (event) => {
setMyCar(event.target.value)
}
return (
<form>
<select value={myCar} onChange={handleChange}>
<option value="Ford">Ford</option>
<option value="Volvo">Volvo</option>
<option value="Fiat">Fiat</option>
</select>
</form>
)
}
実行例(開発準備中) »
<textarea>にわずかな変更を加えることで<select>、Reactはすべての入力要素を同じ方法で処理できるようになります。
