反應組件功能不起作用onClick按鈕

Question

組件

constructor(props) {
   super(props);
   this.fuelD = props.fuelD; //array of objects
   this.state={
     averageFuelConsumption:0,
   }
}

自定義功能

calcAverage = () => {
  console.log("something")
}

按鈕

<button onClick={()=>this.calcAverage)}>Click</button>

單擊按鈕..解決控制台中的任何問題...如果我這樣做..

<button onClick={()=>console.log("something")}>Click</button>

我在函數上嘗試了bind（this）

1.在constructor() -不起作用

2.在onClick -不起作用

Answer 1

將您的按鈕更改為

<button onClick={this.calcAverage}>Click</button>

要么

<button onClick={() => this.calcAverage()}>Click</button>

當前，您的onClick處理程序僅返回對this.calcAverage的引用，而不是實際調用它。

Answer 2

您在onClick={()=>this.calcAverage)}有一個簡單的語法錯誤。 請注意不平衡的結束括號) 。

您可能想要的是onClick={() => this.calcAlverage()}

Answer 3

有兩種解決方法：

解決方案1

<button onClick={() => this.calcAverage()}>Click</button>

您錯過了代碼中的() 。

您是否需要event （例如，如果需要event.stopPropagation() ）：

<button onClick={(event) => this.calcAverage(event)}>Click</button>

解決方案2

<button onClick={this.calcAverage}>Click</button>

推薦使用此方法，因為使用箭頭功能綁定事件（ 如解決方案1所示 ）可能會在將來導致性能問題。 每次渲染組件時，它都會一次又一次地創建相同的事件。

Answer 4

更換：

<button onClick={()=>this.calcAverage)}>Click</button>

同

<button onClick={this.calcAverage)}>Click</button>

在前者中，您將在匿名函數中返回函數的引用，而不是調用它。