在React.js中处理事件
编写事件时在语法上存在一些差异,但是处理方式类似于DOM元素事件处理。
事件处理程序的名称以驼峰大小写形式书写。
示例
简单的HTML事件-
<button onclick=”addUser()”> Add User </button> Event in React with jsx: <button onClick={ addUser }> Add User </button>
区别之一是我们不编写returnfalse来防止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作为参数传递,并将事件对象作为第二个参数传递。事件参数在箭头函数中可见,但是在第二种方法中,它是隐式传递的,因此我们没有提供它。