数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济
心理学
社会科学
时尚研究
法律研究处理 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);
}或者，我们可以使用箭头函数，它将自动绑定方法，然后无需在构造函数中添加绑定。
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 作为参数，将事件对象作为第二个参数。事件参数在箭头函数中可见，但在第二种方法中，它被隐式传递，因此我们没有提供它。
更新于：2019-08-28
498 次浏览
广告