Javascript 在reactjs事件处理中传递{SomeFunction}和{SomeFunction（）}之间的区别 从“React”导入React； 常量函数单击=（）=>{ 常量clickHandler=（）=>{ 日志（“单击按钮”）； }; 返回( 点击 ); }; 导出默认功能点击；

{反应NOOBIE警报} 在上面的代码中，我可以看到

import React from "react";

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

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

export default FunctionClick;

点击

及

点击

但是有人能解释为什么我们传递函数而不调用它吗

---

当页面加载时，如何调用函数（在第二个代码中），即使我们希望在单击按钮时调用它。

如果与括号一起使用，则每次呈现页面时都会调用该函数，但如果没有括号，则单击时会调用该函数

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

import React，{Component}来自'React'；
类示例扩展了React.Component{
建造师（道具）{
超级（道具）
this.clickHandler=this.clickHandler.bind（this）；
}
clickHandler（）{
日志（“单击按钮”）；
};
render（）{
返回(
点击
);
};
}
导出默认功能点击；

或

this.clickHandler（）}>
点击

为您的代码

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

从“React”导入React；
函数函数单击（）{
函数clickHandler（）{
日志（“单击按钮”）；
}
返回(
点击
);
};
导出默认功能点击；

这里您传递的是函数（对象）引用，在您显式调用它之前不会调用它，因为它的in

onClick

和on click在单击事件发生时调用函数

import React from "react";


function FunctionClick () {

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

export default FunctionClick;

---

代码中的错误是，没有像onClick那样提供函数

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

Click-这不正确，我们正在执行clickHandler函数。

而是这样做，（当显式地希望将参数传递给函数时）

{clickHandler（e）}}>单击

因为你不想在页面加载时调用函数，所以你想在触发事件时调用函数。是的，这是我不理解的。当页面加载时如何调用函数，即使我们希望在单击按钮时调用。

clickHandler

类似于

（）=>{return clickHandler（）}

。但是，

clickHandler（）

在每个render@supratik当页面加载时，javascript引擎/解释器在函数名前面看到“（）”并直接执行。请记住，

function name（）{return func（）}

与

func（）

import React from "react";


function FunctionClick () {

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

export default FunctionClick;

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

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

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

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