Блог

Главная - Вопросы по программированию - разница между передачей {someFunction} и {someFunction()} в обработке событий reactjs

разница между передачей {someFunction} и {someFunction()} в обработке событий reactjs

#javascript #reactjs

#javascript #reactjs

Вопрос:

 import React from "react";

const FunctionClick = () => {
  const clickHandler = () => {
  console.log("Button clicked.");
  };

  return (
    <div>
      <button onClick={clickHandler}>Click</button>
    </div>
  );
};

export default FunctionClick;

{РЕАГИРУЙТЕ НА ПРЕДУПРЕЖДЕНИЕ NOOBIE}
В приведенном выше коде я вижу разницу в выводе

 <button onClick={clickHandler}>Click</button>

и

 <button onClick={clickHandler()}>Click</button>

но может кто-нибудь объяснить, почему мы передаем функцию, а не вызываем ее?

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

Комментарии:

1. Поскольку вы не хотите вызывать функцию при загрузке страницы, вы хотите вызвать функцию при запуске события.

2. Да, это то, чего я не понимаю. Как вызывается функция при загрузке страницы, даже если мы хотим вызвать ее при нажатии кнопки.

3. clickHandler аналогично () => {return clickHandler()} . Но clickHandler() выполняет функцию при каждом рендеринге

4. @supratik При загрузке страницы движок / интерпретатор javascript видит ‘()’ перед именем функции и выполняет его напрямую. Просто имейте в виду function name() { return func() } , что это не то же самое, что func()

Ответ №1:

Здесь вы передаете ссылку на функцию (объект), которая не будет вызвана, пока вы не вызовете ее явно, поскольку ее onClick нажатие и нажатие вызывают функцию при возникновении события click .

 <button onClick={clickHandler}>Click</button>

Здесь вы передаете возвращаемое значение clickHandler , теперь от вас зависит, какое значение / объект вы возвращаете clickHandler , поскольку onClick в react ожидает вызова ссылки на функцию, поэтому вы должны вернуть функцию, clickHandler иначе она выдаст ошибку.

 <button onClick={clickHandler()}>Click</button>

Ответ №2:

При использовании со скобками эта функция вызывается каждый раз при отображении страницы, но без скобок она вызывается при нажатии

  import React, { Component } from 'react';

class sample extends React.Component {
constructor(props) {
        super(props)


       this.clickHandler=this.clickHandler.bind(this);

}
 clickHandler() {
  console.log("Button clicked.");
  };
 render() {
  return (
    <div>
      <button onClick={this.clickHandler}>Click</button>
    </div>
  );
};
}
export default FunctionClick;

или

     <button onClick={() => this.clickHandler()}>
 Click
      </button>

для вашего кода

 import React from "react";


function FunctionClick () {

  function clickHandler () {
   console.log("Button clicked.");
  }
  return (
    <div>
      <button onClick={clickHandler}>Click</button>
    </div>
  );
};

export default FunctionClick;

Ответ №3:

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

 <button onClick={clickHandler()}>Click</button> - This is not correct, here we are executing the clickHandler function.

Вместо этого сделайте так (когда явно хотите передать аргументы функции)

 <button onClick={(e) => {clickHandler(e)}}>Click</button>