在React.js中处理事件

编写事件时在语法上存在一些差异，但是处理方式类似于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 }>
   Add User
</button>

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

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

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

adduser=()=>{
}

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

addUser(){
}
<button onClick={ (e)=>{this.addUser(e)}}>
   Add User
</button>

上面的匿名回调函数的问题是，它将在每次在屏幕上呈现按钮时创建，并且会影响性能。

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

要么

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

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