【13章】ブログサイトを作る　課題4を終えて

お問い合わせフォームを作成

条件は、名前は30文字以内、メールアドレスは形式のチェック、本文は500文字以内。送信中は入力欄とボタンを使えなくして、送り終わったら「送信しました」と表示し、フォームを空に戻す。

名前、メールアドレス、本文の3つとも、同じ形で書けます。箱の名前を入れ替えるだけ。

const [〇〇, set〇〇 ] = useState(“ “);
useStateは空箱、これは課題3で覚えた。

送信ボタンを押したときに、上から順にチェックして、ダメなものが見つかったら、エラーの文字を箱に入れて、そこで止める。そのために、returnを使う。
気をつけたのは2つ。1つ目は、送信のたびに、最初にエラーの箱を空に戻すこと。これを忘れると、入力を直しても赤い文字が残ります。2つ目は、メールの形式チェックで、「形ではないとき」に止めたいので、条件の頭に「!」を付けること。

課題3のfetchは、データを取ってくるものでしたが、今回はデータを送ります。fetchの2つ目の引数に、「method: “POST”」は発送の合図、「headers: { "Content-Type": "application/json" },」は送り状、「body: JSON.stringify({ ... }),」は荷物、中身はJSON.stringifyで包んだ文字。

fetchのカッコや波カッコの閉じ方で、少し詰まったが。1つずつ数えて直すと、動くようになった。

送っている間だけtrueになる「isSubmitting」という箱を作った。課題3のisLoadingと同じ考え方で。入力欄とボタンに、この箱の中身を渡すと、送信中は押せなくなる。送り終わったら、箱を元に戻して、3つの入力欄を空にして、アラートを出す。

今回は新しい道具を使うというよりこれまで学んだuseStateとfetchを組み合わせて作れました。

onChangeの中で使っているe.target.valueの仕組みは、まだ完全には分かっていませんが。今は、「打った文字を箱に入れる、お決まりの1行」として理解しておきます。使いながら、少しずつ意味が分かってくるのを楽しみにしています。

難しいけど楽しい😀