フォーム送信
送信ボタンはページを読み込み直す
form の中の送信ボタンを押すと、ブラウザは昔からの決まりに従ってページを送信し、読み込み直します。サーバーに HTML を作ってもらっていた時代の作法です。
React のアプリでこれが起きると困ります。ページが読み込み直されると、これまで貯めてきた state はすべて初期値に戻ります。入力した内容も消えます。そこで、この既定の動きを止めてから、自分で送信の処理を書きます。
onSubmit と preventDefault
JavaScript (JSX)
function handleSubmit(e) {
e.preventDefault();
setSent(name + " さんから受け取りました");
}
<form onSubmit={handleSubmit}>
...
<button type="submit">送信する</button>
</form>e.preventDefault() は「このイベントの既定の動きをやめる」という命令です。フォーム送信ならページの読み込み直しが止まります。ハンドラの一番上に書くのが習慣です。あとに書くと、間で例外が出たときに素通りしてしまうからです。
onClick ではなく onSubmit に付ける
送信ボタンの onClick に書いても、たいていは動きます。ただし form の送信はボタン以外でも起きます。入力欄で Enter キーを押したときです。onClick だけだと Enter からの送信が素通りし、ページが読み込み直されます。
止めるべきは form の送信なので、ハンドラは form の onSubmit に付けます。ボタンのほうは type="submit" にしておくだけです。
送信時に値を読む
値を集める処理は要りません。入力欄はすでに state と同期しているので、ハンドラの中では state 変数をそのまま使えます。これが制御されたコンポーネントの利点です。
JavaScript (JSX)
function handleSubmit(e) {
e.preventDefault();
setSent(name + " さんから「" + body + "」を受け取りました");
}実際のアプリでは、ここで fetch を呼んでサーバーへ送ります。この章では送った内容を画面に出すところまでにします。
つまずきどころ
preventDefaultを書き忘れると、押した瞬間に画面が一瞬白くなって入力が消えますe.preventDefaultとかっこを付け忘れても止まりません。関数は呼んではじめて効きます- ボタンの type を書かないと、form の中では submit として扱われます。送信させたくないボタンには
type="button"を付けます
演習
送信を受け取って、内容を画面に出します。