Next.jsの勉強会 vol.5 フォームとuseState

今回学ぶこと

Reactのフォームでは、入力値をstateとして持ち、送信時に自分で処理を行う。今回は練習として次の流れを実装してみる。

inputの値をstateに入れる
↓
formの送信を止める
↓
入力必須チェックをする
↓
送信後のメッセージを表示する

まず、名前入力用のstateを作った。

const [name, setName] = useState<string>("");

nameは現在入力されている文字列。 setNameは、nameを更新するための関数。

inputにはvalueとonChangeを設定した。

<input
  value={name}
  onChange={(event) => setName(event.target.value)}
/>

value={name}で、inputにReactのstateを表示する。 onChangeは、入力内容が変わるたびに実行されるイベント。 event.target.valueには、今inputに入力されている文字列が入っている。

onChange={(event) => setName(event.target.value)}

このコードにより、入力するたびにnamestateが更新される。

nameがあるときだけ、挨拶文を表示した。

{name && (
  <p className="mt-3 text-sm text-zinc-300">{name}さん、こんにちは。</p>
)}

これは「nameが空ではないときだけ表示する」という意味。

HTMLのformは、送信するとページを再読み込みしようとする。 Reactでは、多くの場合この標準動作を止めて、自分で送信処理を書く。

function handleSubmit(event: React.SyntheticEvent<HTMLFormElement>) {
  event.preventDefault();
}

event.preventDefault()は、formの標準送信を止めるための処理である。 event: React.SyntheticEvent<HTMLFormElement>は、formで起きたReactのイベントを受け取るための型である。

formにonSubmitを設定した。

<form className="mt-6" onSubmit={handleSubmit}>

送信ボタンはtype="submit"にする。

<button type="submit">詳細を見る</button>

このボタンを押すと、formのonSubmitが実行され、handleSubmitが呼ばれる。

練習として、名前が空の場合は送信処理を止めるようにした。

if (!name) {
  alert("お名前を入力してください");
  return;
}

送信できたかどうかを管理するstateを作った。

const [isSubmitted, setIsSubmitted] = useState<boolean>(false);

送信に成功したらtrueにする。

setIsSubmitted(true);

そして、isSubmittedがtrueのときだけメッセージを表示する。

{isSubmitted && (
  <p className="mt-4 bg-teal-900/40 p-4 text-sm text-teal-100">
    {name}さん、送信準備ができました。
  </p>
)}