反应：按钮 onClick 功能在页面加载时运行，但不是您单击它答案

【问题标题】：React: Button onClick function is running on page load but not you click it反应：按钮 onClick 功能在页面加载时运行，但不是您单击它
【发布时间】：2019-06-06 15:26:08
【问题描述】：

我正在使用 ReactStrap 中的 ButtonGroup 和 Button。当您单击其中一个按钮时，我已经设置了 onClick 功能：

< ButtonGroup >
  <Button>Edit</Button>
  <Button onClick={console.log("Print some text")}>Print text</Button>
  <Button>Set as default</Button>
</ButtonGroup >

但是当我加载页面时，这是我得到的：

在我点击按钮之前。如果我单击它，控制台中不会出现任何内容。有什么想法吗？

【问题讨论】：

试试onClick={() => {console.log("Print some text")}}
React onClick event的可能重复

标签： javascript reactjs button bootstrap-4 react-bootstrap

【解决方案1】：

Onclick 必须是函数。您只是将 onlick 设置为console.log("Print some text")的结果

试试这个

   <Button onClick={() => {console.log("Print some text")}}>Print text</Button>

【讨论】：

【解决方案2】：

onClick 参数被评估为回调，因此如果您传递的不是函数，则会在运行时评估并执行。

相反，您应该将一个函数传递给 onClick 参数：

  <Button onClick={() => { console.log("Print some text"); }}>Print text</Button>

小心使用内联函数，因为每次执行渲染时都会对它们进行评估，可能是多次，每个函数都是浏览器使用的更多内存。

如果你有一个类，你可以使用箭头fat方法：

/* ... */
handleOnClick = () => {
  console.log("Print some text");
}

render() {
  return (
    <ButtonGroup>
      <Button>Edit</Button>
      <Button onClick={this.handleOnClick}>Print text</Button>
      <Button>Set as default</Button>
    </ButtonGroup >
  );
}
/* ... */

【讨论】：

很好的解释。只是想添加一些东西：第一个 sn-p 在每次组件渲染时创建一个新的回调函数，这也强制 Button 重新渲染，第二个将使用相同的回调函数，从而防止 Button 重新渲染-rendering，但它会为每个组件实例创建一个新的handleOnClick 函数，而不是重用prototype 方法。在大多数情况下，这可能无关紧要，但如果您实施电子表格或带有许多事件处理程序的长列表之类的东西，并且您的一些用户使用普通计算机，他们可能会注意到差异。
见medium.com/@charpeni/…

【解决方案3】：

为了更清楚

在任何事件触发器（onClick、onChange 等）上，您必须指定要在事件发生时调用的函数 不 立即调用函数

考虑这个函数

ES5：

function callMe() {
  console.log("Some text");
}

ES6：

const callMe = () => {
  console.log("Some text");
}

如果你想在点击按钮时调用这个函数你不能这样做

<Button onClick={callMe()}>Print text</Button>

当按钮加载一次时，这将调用函数 callMe。你需要做的是让它工作是

<Button onClick={callMe}>Print text</Button>

注意函数名后面没有括号，表示该函数还没有被调用。

【讨论】：