Я не понимаю onClick = {() => onClick ()} (вопрос для начинающих)

Question

Итак, я создаю одно из моих первых приложений в реакции. В моем коде вы можете найти компоненты моего приложения, в том числе кнопки. Часть моего кода, которую я не понимаю, это onClick={() => onClick()}. Может ли кто-нибудь простыми словами объяснить мне, что именно делает этот код?

import './Button.scss';
import React from 'react';

export default function Button({ children, primary, bordered, onClick, type }) {
  return (
    <button
      className={`button ${primary ? 'primary' : ''} ${
        bordered ? 'bordered' : ''
      }`}
      onClick={() => onClick()}
      type={type ? type : 'button'}
    >
      {children}
    </button>
  );
}

Моя идея похожа на «когда вы нажимаете на это, вызываете функцию onClick (я не создавал такую ​​функцию)». Эта часть кода просто смущает меня. Почему написание onClick={onClick} не правильный вариант?

Answer 1

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

onClick={e => onClick(e, primary)}

Так что ваш обработчик onClick может вести себя по-разному в зависимости от того, какую кнопку вы нажимаете.