つくる - 問い合わせフォーム
章の総仕上げ
ここまでで、フォームを作るのに必要な部品はそろいました。もう一度並べてみます。
onClickやonSubmitに 関数そのもの を渡す。かっこは付けない- ハンドラは引数でイベントオブジェクトを受け取り、
e.target.valueで入力値を読む - 入力欄は
valueとonChangeの 1 組で state と同期させる - 送信は form の
onSubmitで受け、先頭でe.preventDefault()を呼ぶ - エラー文も state に持ち、
setErrorで出し入れする
この 5 つを 1 つの画面にまとめると、お問い合わせフォームの React 版が完成します。
できあがりの形
画面に置くものは 3 つです。入力の並んだ form、エラー文の行、送信結果の行。state は入力欄 3 つぶんに、エラーと結果を足して 5 つになります。
JavaScript (JSX)
const [name, setName] = useState("");
const [kind, setKind] = useState("仕事のご依頼");
const [body, setBody] = useState("");
const [error, setError] = useState("");
const [sent, setSent] = useState("");送信のハンドラは、止める、確かめる、まとめる、の順です。
JavaScript (JSX)
function handleSubmit(e) {
e.preventDefault();
if (name.trim() === "" || body.trim() === "") {
setError("お名前と本文を入力してください");
setSent("");
return;
}
setError("");
setSent("【" + kind + "】" + name + " さんから「" + body + "」を受け取りました");
}ご用件の select はチェックの対象に入れていません。初期値としてどれかが必ず選ばれているので、空になることが無いからです。空にしたい選択肢があるなら、値が空の option を先頭に置いてチェックに加えます。
同じものを素の JavaScript で書いたときとの違い
JavaScript 入門でも同じフォームを作りました。あちらでは querySelector で要素を探し、value を読み、textContent を書きかえていました。今回はそのどれも書いていません。読むのは state、変えるのも state で、画面は React がついてくるだけです。
書く量が減るというより、画面の状態を 1 か所で言い切れる ようになったのが大きな違いです。いま何が入力されていて、エラーが出ているかどうかは、5 つの state を見れば全部わかります。
演習
お問い合わせフォームを完成させます。