Рекомендации по обработке событий React Click - PullRequest
Новая
       23

Рекомендации по обработке событий React Click

1 голос
/ 16 мая 2019

Во время изучения 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;

Или так?Чтобы объявить функцию в рендере "section" 

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;

Есть ли лучший способ?Какой шаблон кодирования является лучшим?

Ответы [ 3 ]

0 голосов
/ 16 мая 2019

Официальная документация реакции использование: 

...
    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().

0 голосов
/ 16 мая 2019

Ваш первый способ, с использованием функции-прототипа, которую вы связываете в конструкторе, хорош, кроме того, что вам не хватает this: 

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

Ваш второй способ создает новую функцию при каждом рендере, внутри render. Это затрудняет использование handleClick для целей тестирования.

Третий способ, который вы часто видите, заключается в создании функции стрелки во время построения, либо в конструкторе: 

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

или с помощью объявления свойства: 

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

У обоих одинаковые проблемы с насмешками / тестируемостью.

Кроме этого, они в порядке.

0 голосов
/ 16 мая 2019

Я не видел второй способ, о котором вы упомянули, и не рекомендовал бы делать это, так как он создаст новую функцию для каждого рендера.

То, как я это делаю, выглядит так: 

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;

Таким образом, вам не нужно связывать в конструкторе, но функция все равно создается только один раз.

...