Странный результат от переданной функции к дочернему компоненту

Question

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

onClick(id)   {
    console.log(id)
}

<div className="card" onClick={() => this.props.onClick(this.state.id)}>

против

<div className="card" onClick={this.props.onClick(this.state.id)}>

Первый работает, как ожидалось, и дает мне идентификатор состояния компонентов при нажатии. Второй при загрузке печатает все идентификаторы для каждого компонента, прежде чем я даже получу шанс нажать на них. Что мне не хватает? onClick это onClick, почему это возвращение так важно. Спасибо за помощь.

Answer 1

onClick в <div> ожидает функцию, которую вы даете в #1 (называется функцией стрелки).

На #2 вы даете результат выполнения this.props.onClick(this.state.id) который является недействительным.

Answer 2

Вы должны звонить onClick as

   onClick={this.props.onClick(this.state.id)}

Так что поменяйте на

  onClick={() => this.props.onClick(this.state.id)}

Это предотвратит автоматический вызов функции обработчика событий. С учетом вышеуказанного изменения функция обработчика события onClick вызывается только при нажатии

Answer 3

onClick нужно передать функцию.

Ваш первый пример проходит onClick функция, которая вызывает this.props.onClick(this.state.id) когда он работает и работает правильно.

Ваш второй пример проходит onClick результат оценкиthis.props.onClick(this.state.id) именно поэтому все идентификаторы печатаются сразу после загрузки компонента. Я предполагаю, что ничего не возвращается от звонка this.props.onClick(this.state.id) так onClick нечего звонить, когда div действительно нажали.