Странный результат от переданной функции к дочернему компоненту
Так что у меня возникла проблема с пониманием различий в способе вызова функции для реквизита, который я передал дочернему компоненту.
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, почему это возвращение так важно. Спасибо за помощь.
3 ответа
onClick
в <div>
ожидает функцию, которую вы даете в #1 (называется функцией стрелки).
На #2 вы даете результат выполнения this.props.onClick(this.state.id)
который является недействительным.
Вы должны звонить onClick as
onClick={this.props.onClick(this.state.id)}
Так что поменяйте на
onClick={() => this.props.onClick(this.state.id)}
Это предотвратит автоматический вызов функции обработчика событий. С учетом вышеуказанного изменения функция обработчика события onClick вызывается только при нажатии
onClick
нужно передать функцию.
Ваш первый пример проходит onClick
функция, которая вызывает this.props.onClick(this.state.id)
когда он работает и работает правильно.
Ваш второй пример проходит onClick
результат оценкиthis.props.onClick(this.state.id)
именно поэтому все идентификаторы печатаются сразу после загрузки компонента. Я предполагаю, что ничего не возвращается от звонка this.props.onClick(this.state.id)
так onClick
нечего звонить, когда div
действительно нажали.