React 事件处理函数以及传参

分类 React 标签 React 评论:
  1. React 事件处理函数以及传参
  2. 普通函数形式
  3. 箭头函数形式

React 事件处理函数以及传参

在React class组件中，给事件绑定处理函数需要注意一下this的指向，还有获取事件对象以及函数的传参，我们将分几种情况看看到底该怎么做

普通函数形式

如果使用function函数声明一个事件处理函数，我们需要特别注意this的指向，在constructor中修改this的指向或者直接在绑定的时候修改，并且事件对象会默认追加到入参尾部。

如果给处理函数传参了，事件对象是追加到所有入参的尾部的

import React from 'react';

class Com1 extends React.Component {
  constructor(...props) {
    super(...props)
    this.handler1 = this.handler.bind(this)
  }

  handler1(e) {
    console.log(e)  // Event
  }

  handler2(e) {
    console.log(e)  // Event
  }

  handler3(arg1, arg2, e) {
    console.log(arg1)   // 123
    console.log(arg2)   // 456
    console.log(e)      // Event
  }

  render () {
    return (
      <div>
        <button onClick={this.handler1}>点击</button>
        <button onClick={this.handler2.bind(this)}>点击</button>
        <button onClick={this.handler3.bind(this, 123, 456)}>点击</button>
      </div>
    )
  }
}

export default Com1

箭头函数形式

箭头函数和普通函数不一样，不用特别处理this的指向问题，

  • 如果不需要传参，则事件对象默认传入
  • 如果需要传参，则必须重新声明一个函数
  • 如果需要同时传参和事件对象，则新声明函数需要手动传入事件对象
import React from 'react';

class Com1 extends React.Component {
  constructor(...props) {
    super(...props)
  }

  handler1 = (e) => {
    console.log(e)  // Event
  }

  handler2 = (arg1, arg2, e) => {
    console.log(arg1)  // 123
    console.log(arg2)  // 456
    console.log(e)  // undefined
  }

  handler3(e, arg1, arg2) {
    console.log(e)      // Event
    console.log(arg1)   // 123
    console.log(arg2)   // 456
  }

  render () {
    return (
      <div>
        <button onClick={this.handler1}>点击</button>
        <button onClick={() => this.handler2(123, 456)}>点击</button>
        <button onClick={(e) => this.handler3(e, 123, 456)}>点击</button>
      </div>
    )
  }
}

export default Com1
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 289211569@qq.com

©2016-2023 Daryl