close

でのイベントの処理 React- でのイベント処理の包括的なガイド React .js

イベントは、 でインタラクティブで動的なユーザー インターフェイスを作成する際に重要な役割を果たします 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。