将函数正确绑定到 Button onClick答案

【问题标题】：Correctly bind a function to Button onClick将函数正确绑定到 Button onClick
【发布时间】：2016-11-14 13:47:01
【问题描述】：

这是一个 React-Bootstrap-Button：

<Button onClick={console.log('Hello')} className="pull-right">Try me</Button>

我希望每次单击按钮时都执行该函数。但是，它将在页面加载时执行。我在某处读到我应该绑定函数：

<Button onClick={console.log('Hello').bind(null)} className="pull-right">Try me</Button>

这给了我错误：Uncaught (in promise) TypeError: Cannot read property 'bind' of undefined。

我该怎么办？

【问题讨论】：

标签： javascript reactjs button

【解决方案1】：

您立即调用log，然后尝试bind 其返回值（即undefined）。

你需要绑定函数本身。

您还需要将其绑定到console 上下文而不是null 上下文。 log 关心它所附加的对象。

onClick={console.log.bind(console, 'Hello')}

Idiomatic React 会单独创建函数，而不是尝试内联：

function myFunction () {

  function handleClick(e) {
    e.preventDefault();
    console.log('Hello');
  }

  return (
    <Button onClick={handleClick} className="pull-right">Try me</Button>

  );
}

【讨论】：

【解决方案2】：

我想这就是你想要的：

<button onclick="javascript:console.log('Hello');" className="pull-right">Try me</button>

通知onclick="javascript:console.log('Hello');"。

【讨论】：

这与 React 不兼容，标签 javascript: 完全没有意义，因为没有循环可以应用标签。
我注意到在 Firefox 上它只适用于 javascript:。我真的不知道情况是否仍然如此，但那是前一段时间......@Quentin
从未如此。一定是其他原因造成了这个问题。也许您将其粘贴在 href 属性中。
那为什么是我呢？
不，我使用了 onclick 并且没有 javascript: 它不起作用。