Question

在学习React的过程中，我看到人们对事件的处理方式有所不同。处理点击事件的最佳做法是什么？

这样好吗？将事件添加到要用此方法调用的类对象吗？

import React from "react";

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    handleClick = handleClick.bind(this)
  }

  handleClick(){
    //Do some stuff
  }

  render(){

    return(
      <div onClick={this.handleClick}>
        Foo
      </div>)
  }
}

export default Foo;

还是这样？在渲染“部分”中声明函数

import React from "react";

class Bar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render(){
    const handleClick = () => {
      //Do some stuff
    }

    return(
      <div onClick={handleClick}>
        Bar
      </div>)
  }
}

export default Bar;

有更好的方法吗？哪种编码方式最好？

Answer 1

我还没有看到您提到的第二种方法，因此不建议这样做，因为它将为每个渲染创建一个新功能。

我的操作方式如下：

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  handleClick = () => {
    //Do some stuff
  }

  render(){

    return(
      <div onClick={this.handleClick}>
        Foo
      </div>)
  }
}

export default Foo;

这样，您在构造函数中不需要绑定，但是该函数仍然只创建一次。

Answer 2

官方文档react使用：

...
    handleClick = handleClick.bind(this)
...

但是我认为，最好也使用以下内容：从“反应”导入React；

class Bar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  handleClick = () => {
    //Do some stuff
  }

  render(){
    return(
      <div onClick={this.handleClick}>
        Bar
      </div>)
  }
}

export default Bar;

使用第二种方法，您不必担心使用.bind()。

Answer 3

除了缺少this之外，您的第一种方法是使用绑定到构造函数中的原型函数，这很不错：

this.handleClick = this.handleClick.bind(this);

第二种方法是在render内部的每个渲染上创建一个新函数。这使得模拟handleClick以进行测试变得困难。

您经常看到的第三种方法是在构造时在构造器中创建一个箭头函数：

this.handleClick = event => {
    // ...
};

或使用属性声明：

class Bar extends React.Component {
    handleClick = event => {
        // ...
    };
}

它们都具有相同的模拟/可测试性问题。

除此之外，还可以。

React Click事件处理最佳做法

3 个答案: