正確將功能綁定到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');" 。