Reactjs事件处理的三种写法

目录

• 前言
• 1. 在回调函数中使用箭头函数
• 2. 在构造器中绑定this
• 3. 使用类字段语法
• 事件参数的传递。
• 总结

前言

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若是将事件传递给子组件，可能会有从新渲染的耗能问题。