React|web前端高级React - React从入门到进阶之React事件处理 react|react事件处理|事件处理程

系列文章目录
第一章：React从入门到进阶之初识React
第一章：React从入门到进阶之JSX简介
第三章：React从入门到进阶之元素渲染
第四章：React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤
第五章：React从入门到进阶之组件化开发及Props属性传值
第六章：React从入门到进阶之state及组件的生命周期
第七章：React从入门到进阶之React事件处理
第八章：React从入门到进阶之React条件渲染

文章目录

- - 系列文章目录
  - 一、事件处理
  - 二、向事件处理程序传递参数

【React|web前端高级React - React从入门到进阶之React事件处理】
一、事件处理

React 元素的事件处理和DOM元素的很相似，但也有一点语法上的不同：

React事件的命名采用的是小驼峰（camelCase），而不是纯小写

使用JSX语法时需要传入一个函数作为事件处理函数，而不是一个字符串

传统的HTML：

React元素

在Reac中还有另外一个不同的地方就是：我们不能通过返回false的方式来阻止事件的默认行为。必须得通过显示调用preventDefault来阻止。

传统HTML

Click me

React组件

function ActionLink() { function handleClick(e) { e.preventDefault(); //显示调用preventDefault来阻止 console.log('The link was clicked.'); }return ( Click me ); }

上面代码中handleClick方法中的参数e是一个合成事件，React是根据W3C规范来定义这些合成事件的，所以我们不必担心浏览器的兼容性问题。

使用 React 时，一般不需要使用 addEventListener 为已创建的 DOM 元素添加监听器。事实上，只需要在该元素初始渲染的时候添加监听器即可。

当使用 ES6 class 语法定义一个组件的时候，通常的做法是将事件处理函数声明为 class 中的方法。例如，下面的 Toggle 组件会渲染一个让用户切换开关状态的按钮：

class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // 为了在回调中使用 `this`，这个绑定是必不可少的 this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(state => ({ isToggleOn: !state.isToggleOn })); } render() { return ( ); } }ReactDOM.render( , document.getElementById('root') );

这里最需要注意的是在类组件中定义的方法中的this指向问题

在类组件的生命周期函数中，比如render、componentDidMount等，this默认指向的是当前React组件的实例，我们可以直接使用this，因为React默认会去调用这些方法

但是在类组件中我们自己定义的方法中的this就不一定指向的是当前组件的实例了。

因为我们自己定义的方法一般多为元素的事件绑定方法，而我们在给事件绑定这些方法时，并没有触发方法的执行，而是要等到元素被点击（或其它事件）后才会触发方法的执行，而这时调用方法的实际是这个被点击的元素，所以this指向可能就不是React组件的实例了

如果想让自定义方法中的this还是指向当前组件的实例，有如下三种方法可以实现

1.通过bind方法改变this指向来实现 this.方法名.bind(this)

2.在定义方法时用箭头函数的方式定义，因为箭头函数中的this在定义时就已经确定了；方法名 = ()=>{}

3.在给元素绑定事件时先绑定一个箭头函数，然后在箭头函数中调用自定义的方法执行

下面我们用代码来一一演示一下：

自定义方法handleClick中的this为undefined

class LoggingButton extends React.Component { handleClick(){ console.log('this is:', this); //this为undefined }render() { return ( ); } }

利用bind改变函数中的this指向，同时也可以传递其它参数

class LoggingButton extends React.Component { handleClick(){ console.log('this is:', this); }render() { return ( ); } }

直接将handleClick定义为箭头函数

class LoggingButton extends React.Component { handleClick = () => { console.log('this is:', this); //this指向当前组件的实例 }render() { return ( ); } }

先给元素绑定一个箭头函数，然后在箭头函数中调用方法执行

class LoggingButton extends React.Component { handleClick(){ console.log('this is:', this); }render() { return ( ); } }

二、向事件处理程序传递参数

在循环中，通常我们会为事件处理函数传递额外的参数。例如，若 id 是你要删除那一行的 ID，以下两种方式都可以向事件处理函数传递参数：

上述两种方式是等价的，分别通过箭头函数和 Function.prototype.bind 来实现。
在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。