🌈个人主页：前端青山
🔥系列专栏：React篇
🔖人终将被年少不可得之物困其一生
依旧青山,本期给大家带来React篇专栏内容:React-事件处理
目录
1、事件绑定
React元素的事件处理和DOM元素的很相似，但是有一点语法上的不同。React元素的事件绑定采用on+事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写，如onclick, React里的事件是驼峰如onClick，React的事件并不是原生事件，而是合成事件。
在React里，类组件与函数组件绑定事件是差不多的，只是在类组件中绑定事件函数的时候需要用到this，代表指向当前的类的引用，在函数中不需要调用this关键词。
函数组件事件绑定
import React from "react";
const clickHandler = () => {
console.log("海纳百川有容乃大，壁立千仞无欲则刚。");
};
const App = () => {
return <button onClick={clickHandler}>老林说</button>;
};
export default App;类组件事件绑定
import React, { Component } from "react";
class App extends Component {
render() {
return (
<div>
// 使用JSX语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。
<button onClick={this.clickHandler}>老林说</button>
</div>
);
}
clickHandler() {
console.log("海纳百川有容乃大，壁立千仞无欲则刚。");
}
}
export default App;注意点：
在写事件的时候，调用时如果不涉及传参的话，一定不要加
()，加了就错。在类组件中写事件处理程序的时候，不能写标准的
function xxx () {}，写了就报错，一定要用简化的写法或者箭头函数形式事件处理属性名称（事件绑定时用的属性）一定要使用符合react的小驼峰写法
2、事件对象
React中可以通过事件处理函数的参数获取到事件对象，它的事件对象叫做：合成事件，即兼容所有浏览器，无需担心跨浏览器兼容问题。这个对象和之前学习的事件对象所包含的方法和属性都基本一致，不同的是React中的事件对象并不是浏览器提供的，而是它自己内部所构建的。此事件对象拥有和浏览器原生事件相同的接口，包括stopPropagation()和 preventDefault()，如果我们想获取到原生事件对象，可以通过e.nativeEvent属性来进行获取。
import React, { Component } from "react";
class App extends Component {
render() {
return (
<div>
<button onClick={this.clickHandler}>老林说</button>
</div>
);
}
clickHandler(e) {
console.log("海纳百川有容乃大，壁立千仞无欲则刚。");
// react构建的事件对象
console.log(e);
// 浏览器原生的事件对象
console.log(e.nativeEvent);
// 事件对应的DOM对象
console.log(e.target);
// 事件对应的DOM对象的内嵌HTML
console.log(e.target.innerHTML);
}
}
export default App;3、this指向问题
在JSX事件函数方法中的this，默认不会绑定this指向。如果我们忘记绑定，当我们调用这个函数的时候this的值为undefined。所以使用时一定要绑定好this的指向！
例如，像下面这段代码回调函数中的this输出为undefined：
import React, { Component } from "react";
class App extends Component {
render() {
return (
<div>
<button onClick={this.clickHandler}>
老林说
</button>
</div>
);
}
clickHandler() {
console.log(this);
}
}
export default App;解决上面出现的this指向问题的方式有以下几种：
构造时为事件处理程序绑定this
行内调用时为事件处理程序绑定this
箭头函数的方式保留原this指向
4、事件方法传参
React中对于事件方法传参的方式有着非常灵活的用法。以传递参数username值为zhangsan为例，常见的有以下几种方式：
通过
this.事件方法.bind（bind为绑定数据）方式进行传参（推荐），例如：onClick={this.clickHandler.bind(this,'zhangsan')}对应的形参接收：
clickHandler(username)
onClick={this.clickHandler.bind(this,'zhangsan')}对应的形参接收：
clickHandler(username,event)
使用箭头函数传参，例如：
onClick={() => this.事件方法('zhangsan')}对应的形参接收：
clickHandler(username)
onClick={(e) => this.事件方法('zhangsan',e)}对应的形参接收：
clickHandler(username,event)
React事件绑定的方式有哪些？区别？
一、是什么
在react应用中，事件名都是用小驼峰格式进行书写，例如onclick要改写成onClick
最简单的事件绑定如下：
class ShowAlert extends React.Component {
showAlert() {
console.log("Hi");
}
render() {
return <button onClick={this.showAlert}>show</button>;
}
}从上面可以看到，事件绑定的方法需要使用{}包住
上述的代码看似没有问题，但是当将处理函数输出代码换成console.log(this)的时候，点击按钮，则会发现控制台输出undefined
二、如何绑定
为了解决上面正确输出this的问题，常见的绑定方式有如下：
render方法中使用bind
render方法中使用箭头函数
constructor中bind
定义阶段使用箭头函数绑定
render方法中使用bind
如果使用一个类组件，在其中给某个组件/元素一个onClick属性，它现在并会自定绑定其this到当前组件，解决这个问题的方法是在事件函数后使用.bind(this)将this绑定到当前组件中
class App extends React.Component {
handleClick() {
console.log('this > ', this);
}
render() {
return (
<div onClick={this.handleClick.bind(this)}>test</div>
)
}
}这种方式在组件每次render渲染的时候，都会重新进行bind的操作，影响性能
render方法中使用箭头函数
通过ES6的上下文来将this的指向绑定给当前组件，同样再每一次render的时候都会生成新的方法，影响性能
class App extends React.Component {
handleClick() {
console.log('this > ', this);
}
render() {
return (
<div onClick={e => this.handleClick(e)}>test</div>
)
}
}constructor中bind
在constructor中预先bind当前组件，可以避免在render操作中重复绑定
class App extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('this > ', this);
}
render() {
return (
<div onClick={this.handleClick}>test</div>
)
}
}定义阶段使用箭头函数绑定
跟上述方式三一样，能够避免在render操作中重复绑定，实现也非常的简单，如下：
class App extends React.Component {
constructor(props) {
super(props);
}
handleClick = () => {
console.log('this > ', this);
}
render() {
return (
<div onClick={this.handleClick}>test</div>
)
}
}三、区别
上述四种方法的方式，区别主要如下：
编写方面：方式一、方式二写法简单，方式三的编写过于冗杂
性能方面：方式一和方式二在每次组件render的时候都会生成新的方法实例，性能问题欠缺。若该函数作为属性值传给子组件的时候，都会导致额外的渲染。而方式三、方式四只会生成一个方法实例
综合上述，方式四是最优的事件绑定方式