正确将功能绑定到Button onClick

Question

这是一个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>

这给了我错误：未捕获（承诺）TypeError：无法读取未定义的属性“ bind”。

我该怎么办？

Answer 1

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

您需要绑定函数本身。

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

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

---

惯用的React将单独创建函数，而不是尝试内联地执行该函数：

function myFunction () {

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

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

  );
}

Answer 2

我认为这是您想要的：

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

请注意onclick="javascript:console.log('Hello');" 。