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

感谢您的认真阅读,更多内容请查看:
出处:http://www.cnblogs.com/weiqinl
个人主页http://weiqinl.com
github: weiqinl
简书:weiqinl
您的留言讨论是对博主最大的支持!
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
posted @ 2019-04-30 22:48  weiqinl  阅读(2356)  评论(0编辑  收藏  举报