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 应用程序中的需要使用这些事件或创建自定义事件。