React入門 練習問題 25:イベント処理:フォームのデフォルト動作の制御
次のReactコンポーネントで、フォーム送信時にページの再読み込みを防ぐために???に入れるべき正しいコードはどれか。
```jsx
function Form() {
const handleSubmit = (e) => {
???
console.log('送信されました');
};
return <form onSubmit={handleSubmit}>...</form>;
}
```
- e.preventDefault();
- e.stopPropagation();
- return false;
- e.cancelBubble = true;
- e.stopDefault();
Qraftユーザーの成績:難易度 Aランク(レーティング1300)・正答率 47%(8/17回正解)
レーティングは解いた人の実力と正誤から算出する難しさ(初期値1200)。ランクはその全問題中の順位(S+が最難関、F-が最易)
正解と解説を見る
フォームのsubmitイベントが発生すると、ブラウザは既定でページの再読み込みを行います。この既定の動作をキャンセルするにはe.preventDefault()を呼び出します。
【正解の理由】
e.preventDefault()は、イベントオブジェクトが持つブラウザ標準の動作(ここではフォーム送信によるページ再読み込み)をキャンセルするメソッドで、Reactの合成イベント(=ブラウザ間の差異を吸収したReact独自のイベントオブジェクト)でも同様に利用できます。
【不正解の理由】
• 「e.stopPropagation()」:これはイベントが親要素へ伝播するのを止めるためのメソッドであり、既定の動作の防止とは異なる
• 「return false;」:Reactのイベントハンドラでは、return falseを返しても既定の動作は自動的にはキャンセルされない
• 「e.cancelBubble = true;」:古いブラウザ向けの伝播制御プロパティであり、Reactの標準的な既定動作防止の手段ではない
• 「e.stopDefault();」:そのようなメソッドはReactのイベントオブジェクトには存在しない