React-事件处理-编程知识

🌈个人主页：前端青山
🔥系列专栏：React篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来React篇专栏内容:React-事件处理

1、事件绑定

2、事件对象

3、this指向问题

4、事件方法传参

React事件绑定的方式有哪些？区别？

一、是什么

二、如何绑定

render方法中使用bind

render方法中使用箭头函数

constructor中bind

定义阶段使用箭头函数绑定

三、区别

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对象的内嵌HTMLconsole.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>)}
}