Reactjs事件处理的三种写法

Posted 2021-11-26 weiqinl

目录

• 前言
• 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如果将事件传递给子组件，可能会有重新渲染的耗能问题。