Question

这是一个React-Bootstrap-Button：

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

我希望每次点击按钮都能执行该功能。但是，它将在pageload上执行。我读到了应该绑定函数的地方：

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

这给了我错误：Uncaught（在promise中）TypeError：无法读取undefined的属性'bind'。

我该怎么办？

Answer 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>

  );
}

Answer 2

我认为这就是你想要的：

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

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

将函数正确绑定到Button onClick

2 个答案: