При обновлении страницы сразу вызывается alert, хотя должен по нажатию на кнопку (onClick)?

Question

[YarikLtv4k]

Header - куда вставляется компонент

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

import logo from './assets/img/pizza-logo.svg';

function Header() {
  const clickOnButton = () => {
    alert(233);
  };

  return (
    <div className="header">
      <div className="container">
        <div className="header__logo">
          <img width="38" src={logo} alt="Pizza logo" />
          <div>
            <h1>React Pizza</h1>
            <p>самая вкусная пицца во вселенной</p>
          </div>
        </div>
        <Button onClick={clickOnButton()}>555</Button>
      </div>
    </div>
  );
}

export default Header;

Comments

[black1277]

если вы передаете ссылку на функцию - то она будет вызвана при возникновении события, а если вы вызываете её сразу (используя круглые скобки() ) - то она и будет вызвана сразу.

Answer 1

[Dmitry Bay]

clickOnButton() -> clickOnButton

Вы должны передавать функцию, а не ее выполнение.

Answer 2

[Alexandroppolus]

<Button onClick={clickOnButton}>