イベントは、 でインタラクティブで動的なユーザー インターフェイスを作成する際に重要な役割を果たします React。 このチュートリアルでは、イベントを処理し、ユーザーのアクションに効果的に応答する方法を検討します React。
JSX でのイベント処理
React は、ネイティブ ブラウザ イベントをラップし、異なるブラウザ間で正規化する合成イベント システムを提供します。 属性を使用して、イベント ハンドラーを JSX 要素に直接アタッチできます onEventName。
例：
function handleClick() {
console.log("Button clicked!");
}
<button onClick={handleClick}>Click Me</button>
イベントハンドラーとイベントオブジェクト
イベントがトリガーされると、 React イベント オブジェクトがイベント ハンドラー関数に自動的に渡されます。 このオブジェクトにアクセスして、ターゲット要素、マウス座標などのイベントに関する追加情報を取得できます。
例：
function handleMouseOver(event) {
console.log("Mouse coordinates:", event.clientX, event.clientY);
}
<div onMouseOver={handleMouseOver}>Hover over me</div>
バインディングイベントハンドラー
イベント ハンドラーを props として渡すときは、イベント ハンドラーをコンポーネント インスタンスにバインドすることが重要です。 this これにより、イベントがトリガーされたときに 正しいコンテキストが確実に維持されます。
例：
class MyComponent extends React.Component {
handleClick() {
console.log("Button clicked!");
}
render() {
return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
}
}
イベントの伝播とデフォルトアクションの防止
React イベントの伝播を自動的に処理する合成イベント システムを使用します。 フォームの送信やリンク ナビゲーションなどのブラウザーのデフォルトの動作を防止するには、このメソッドを呼び出します event.preventDefault()。
例：
function handleSubmit(event) {
event.preventDefault();
console.log("Form submitted!");
}
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form>でのイベントの処理方法を理解することで React 、ユーザーのアクションにシームレスに応答する、インタラクティブで応答性の高いユーザー インターフェイスを作成できます。
以下は一般的なイベントのリストです React
1. onClick: このイベントは要素がクリックされたときに発生します。
例：
<button onClick={handleClick}>Click Here</button> 2. onChange: このイベントは、入力要素(input、select、textarea) の値が変更されたときに発生します。
例：
<input type="text" onChange={handleChange} /> 3. onSubmit: このイベントはフォームが送信されたときに発生します。 例：
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form> 4. onMouseEnter: このイベントは、マウス ポインタが要素に入ると発生します。
例：
<div onMouseEnter={handleMouseEnter}>Mouse Enter Here</div> 5. onMouseLeave: このイベントは、マウス ポインタが要素から離れると発生します。
例：
<div onMouseLeave={handleMouseLeave}>Mouse Leave Here</div> 6. onKeyDown: キーが押されたときにこのイベントが発生します。
例：
<input type="text" onKeyDown={handleKeyDown} /> 7. onKeyUp: キーを離したときにこのイベントが発生します。
例：
<input type="text" onKeyUp={handleKeyUp} /> 8. onFocus: このイベントは、要素がフォーカスを受け取ると発生します。
例：
<input type="text" onFocus={handleFocus} /> 9. onBlur: このイベントは、要素がフォーカスを失ったときに発生します。
例：
<input type="text" onBlur={handleBlur} /> 10. onScroll: このイベントは要素がスクロールされると発生します。
例：
<div onScroll={handleScroll}>Scrollable Content</div>
これらは、 での一般的なイベントのほんの一部の例です React。 アプリケーションのニーズに応じて、これらのイベントを使用したり、カスタム イベントを作成したりできます React。