イベント処理の基礎
知識課題
知識課題1
- HTMLの
onclick属性とReactのonClickプロパティについて、それぞれの記述方法および動作の違いを説明してください。
知識課題2
- Reactにおいて、イベントハンドラーをコンポーネントのpropsとして渡す方法を説明してください。
知識課題3
- イベントのバブリングとは何か説明してください。
event.preventDefault()メソッドの役割を説明し、具体的にどのような場面で使われるか例を挙げてください。event.stopPropagation()メソッドの役割を説明してください。
実践課題
実践課題1
ボタンをクリックすると、コンソールに「ボタンがクリックされました！」と表示するReactコンポーネントを作成してください。
onClickプロパティに直接関数を定義する方法と、事前に定義した関数を参照する方法の両方を実装してください。
実践課題2
親コンポーネントでイベントハンドラー関数を定義し、子コンポーネントにpropsとして渡してください。
- 子コンポーネント内のボタンをクリックした際に、親コンポーネントの関数がpropsを通じて実行されるようにしてください。
実践課題3
テキスト入力フィールドと送信ボタンを持つフォームを作成してください。
- フォーム送信時（
onSubmitイベント）に、event.preventDefault()を使用してページの再読み込みを防ぎ、入力されたテキストをコンソールに出力する機能を実装してください。
実践課題4
外側のdiv要素と、その内側にボタン要素を持つコンポーネントを作成してください。
- 両方の要素に
onClickイベントハンドラーを設定し、クリックされた要素名（例：「外側のdivがクリックされました」、「ボタンがクリックされました」）をそれぞれコンソールに表示してください。 - ボタンをクリックした際にイベントバブリングが起き、両方のメッセージが表示されることを確認してください。
- ボタンのイベントハンドラー内で
event.stopPropagation()を呼び出し、ボタンをクリックしても外側のdivのメッセージが表示されなくなるように修正してください。