Разница в обработке onClicks с функциями REACT - PullRequest
Новая
       11

Разница в обработке onClicks с функциями REACT

1 голос
/ 28 мая 2020

В чем разница между этими двумя строками: 

<button onClick={() => this.updateTodoToShow("all")}>all</button>

и 

<button onClick = {this.deleteCompleted}>delete completed</button>

Почему одна вызывается с помощью функции стрелки, а не другая? Когда уместно делать каждое из этих действий? Вот полный код этих двух функций: 

deleteCompleted = () => {
          this.setState({
              todos: this.state.todos.filter(todo => !todo.complete)
          });
      };

updateTodoToShow = s => {
        this.setState({
          todoToShow: s
        });
      };

1 Ответ

0 голосов
/ 28 мая 2020

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

Второй, по-видимому, не должен передавать ничего, кроме события щелчка, которое является аргументом по умолчанию (на самом деле, похоже, что он тоже не использует событие), поэтому он передает только ссылку на функцию на this.deleteCompleted.

Если для обработчика событий не требуется дополнительных параметров, лучше передать только ссылку на функцию. Создание ненужной встроенной функции бессмысленно, как показано ниже: 

onClick={(e) => this.handler(e)}

Функционально эквивалентно приведенному ниже, просто нет ненужной промежуточной функции: 

onClick={this.handler}

Главное чтобы понять, что оба метода передают onClick ссылку на функцию. Первый передает ссылку на встроенную функцию, второй передает ссылку на функцию deleteCompleted.

Целесообразно использовать встроенную функцию только , когда вам нужно добавить дополнительные аргументы обработчику. Другой распространенный вариант использования - передача id или другого идентификатора при создании кнопок в al oop.

...