在 React.js 中处理事件

react jsjavascript libraryfront end technology更新于 2025/10/24 3:56:17

事件的编写语法上有一些差异，但处理方式与 DOM 元素事件处理类似。

事件处理程序的名称采用驼峰式命名法。

示例

简单 HTML 中的事件 −

<button onclick=”addUser()”>
   Add User
</button>
Event in React with jsx:
<button onClick={ addUser }>
   Add User
</button>

其中一个区别是，我们没有编写 return false 来防止 React 中的默认行为。我们特意这样写:event.preventDefault()

简单的 HTML 代码 −

<button onclick=”console.log(‘Add user event clicked’); return false;”>
   Add User
</button>

在 React 中，应该这样写:−

function addUser(event){
   event.preventDefault();
   console.log(‘Add user event clicked’);
}
<button onClick={ addUser }>
   添加用户
</button>

此处，在 React 中传递的事件是合成的，并且跨浏览器兼容。ES6 中的方法可以作为事件处理程序。在 JavaScript 类中，方法默认不绑定到类。类中的这些方法应该在构造函数中声明并绑定，如下所示 −

constructor(props){
   super(props);
   this.addUser=this.addUser.bind(this);
}

或者我们可以使用箭头函数，它会自动绑定方法，无需在构造函数中添加 bind 操作。

adduser=()=>{
}

如果我们不使用箭头函数，另一种选择是在 React 元素本身上调用方法并进行绑定 −

addUser(){
}
<button onClick={ (e)=>{this.addUser(e)}}>
   添加用户
</button>

上述匿名回调函数的问题在于，每次按钮在屏幕上渲染时都会创建它，这会影响性能。

<button onClick={ (e)=>this.addUser(id, e) }></button>

或者

<button onClick={ this.addUser.bind(this, id) }></button>

在上述事件处理程序中，我们将 id 作为参数传递，并将事件对象作为第二个参数传递。事件参数在箭头函数中可见，但在第二种方法中，它是隐式传递的，因此我们没有提供它。