React入門 練習問題 54：イベントハンドリング
次のコードを実行した場合の動作として正しいものはどれですか？
```jsx
import React, { useState } from 'react';
function Form() {
const [inputValue, setInputValue] = useState('');
const handleChange = (event) => {
setInputValue(event.target.value);
};
const handleSubmit = (event) => {
alert('フォームが送信されました: ' + inputValue);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={inputValue}
onChange={handleChange}
placeholder="名前を入力"
/>
<button type="submit">送信</button>
</form>
);
}
```
- 送信ボタンをクリックすると、アラートが表示された後にページがリロードされる
- 送信ボタンをクリックすると、アラートが表示されるがページはリロードされない
- 入力フィールドに文字を入力できず、送信ボタンをクリックしてもアラートは表示されない
- 送信ボタンをクリックしてもアラートは表示されず、すぐにページがリロードされる
- 送信ボタンをクリックすると、ページがリロードされてからアラートが表示される
Qraftユーザーの成績：正答率 21%（3/14回正解）
正解と解説を見る
HTMLのフォームは、onSubmitハンドラ内でevent.preventDefault()を呼び出さない限り、送信時にページがリロードされるというブラウザ標準の動作を持ちます。この設問ではpreventDefault()が呼ばれていないため、アラートが表示された後にページがリロードされるのが正しい動作です。
【正解の理由】
handleSubmit関数はalertを呼び出すだけで、event.preventDefault()を呼んでいません。そのためalert表示後、フォームのデフォルト動作（ページのリロード）がそのまま発生します。
【不正解の理由】
• 「アラートは表示されるがリロードされない」：preventDefault()が無いため、デフォルト動作のリロードは阻止されません。
• 「入力フィールドに文字を入力できず、アラートも表示されない」：value/onChangeが正しく設定されており、文字入力もフォーム送信も問題なく行えます。
• 「アラートは表示されず、すぐにリロードされる」：handleSubmitが呼ばれた時点でalertは実行されるため、表示されないことはありません。
• 「リロードされてからアラートが表示される」：JavaScriptの実行が先に完了してからブラウザのデフォルト動作が発生するため、順序が逆になることはありません。