Блог

это упражнение из codecademy. Почему требуется передавать обработчик событий в качестве ссылки? почему я не могу ввести onClick={goBack()} вместо onClick={goBack}

 const goBack = () => {
    setQuestionIndex(prevQuestionIndex => prevQuestionIndex - 1);
  }

....

 <button onClick={goBack}>
          Go Back
 </button>
 

Когда вы используете onClick={goBack()} , вы вызываете / вызываете функцию goBack , и результат goBack вызова передается в onClick

Живая демонстрация

Но если вы используете as onClick={goBack} , то в этом случае вы передаете a reference в onClick , что означает, что когда пользователь click нажмет на кнопку, он автоматически вызовет функцию. Вам не нужно вызывать функцию самостоятельно.

1) Допустим, рассмотрим функцию со значением

 <button onClick={fun()}> button with function reference</button>
 

Если вы передаете значение функции, то в первую очередь она выдает a warning в консоли как:

 Warning:
Expected `onClick` listener to be a function, instead got a value of `string` type.
 

и когда вы вызываете его, он выдает error как

 Error
Expected `onClick` listener to be a function, instead got a value of `string` type.
 

2) Если вы используете как

 <button onClick={fun}> button with function reference</button>
 

затем функция fun будет передана как a prop , и при использовании нажмите на функцию, тогда эта функция fun будет вызвана автоматически

goBack является ссылкой на функцию, goBack() вызывает эту функцию и возвращает результат.

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

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

Вот фрагмент, чтобы увидеть это, песочница