Reactjs事件处理的三种写法

前言

Reactjs中事件处理，与DOM元素处理类似，但也有一些不同的语法。

1. React 事件名称使用驼峰命名，而不是全小写命名。
2. 使用JSX，可以将函数作为事件处理程序传递，而不是字符串。

es6的class语法规定，类的方法内部，如果含有this，它默认指向类的实例。但是，单独使用该方法，可能报错，this指向不明确。
为了解决这个问题，react提出了3中解决方法。

1. 在回调函数中使用箭头函数

在onClick的时候，使用箭头函数。这个语法确保this 绑定在handleClick中。
优势：很容易让人看懂。
缺点：
在每次render时候，都会产生一个匿名函数。如果此组件作为一个子组件，那么父组件render的时候，子组件也可能会重新渲染，消耗性能。
在线预览

class ToggleBtn extends React.Component { ?constructor() { ???super() ???this.state = { ?????isToggleOn: true ???} ?} ?handleClick(e) { ???this.setState({ ?????isToggleOn: !this.state.isToggleOn ???}) ?} ?render() { ???return ( ?????<div> ???????<button onClick={(e) => this.handleClick(e)}>{this.state.isToggleOn ? 'ON' : 'OFF'}</button> ?????</div> ???) ?}}

2. 在构造器中绑定this

优势：通用。
缺点：繁琐，每次都得手动绑定this。
在线预览

class ToggleBtn extends React.Component { ?constructor() { ???super() ???this.state = { ?????isToggleOn: true ???} ???// 这个bind方法是必须的，以确保`this`可以在回调函数handleClick中使用 ???this.handleClick = this.handleClick.bind(this) ?} ???handleClick(e) { ???this.setState({ ?????isToggleOn: !this.state.isToggleOn ???}) ?} ?render() { ???return ( ?????<div> ???????<button onClick={this.handleClick}>weiqinl-{this.state.isToggleOn ? 'ON' : 'OFF'}</button> ?????</div> ???) ?}}

3. 使用类字段语法

优点：简单方便。
缺点：
ES7功能。实验性属性，可能不兼容，需要babel处理。
在线预览

class ToggleBtn extends React.Component { ?constructor() { ???super() ???this.state = { ?????isToggleOn: true ???} ?} ?// 这个语法确保`this` 绑定在handleClick中 ???handleClick = (e) => { ???this.setState({ ?????isToggleOn: !this.state.isToggleOn ???}) ?} ?render() { ???return ( ?????<div> ???????<button onClick={this.handleClick}>weiqinl-{this.state.isToggleOn ? 'ON' : 'OFF'}</button> ?????</div> ???) ?}}

事件参数的传递。

使用箭头函数和方法原型属性的bind方法，两种方式传递参数的写法。

1. 使用e代表React event，
2. 在箭头函数中，默认是作为第二个参数的。
3. 在bind方法时候，是自动作为它的参数可以使用的。

<button onClick={(e) => this.deleteRow(id, e) }>Delete Row</button><button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

总结

这几种方式，与类中this的绑定问题，解决方式类似。
尽量使用方法2和方法3。方法1如果将事件传递给子组件，可能会有重新渲染的耗能问题。

Reactjs事件处理的三种写法

原文地址：https://www.cnblogs.com/weiqinl/p/10798437.html