React Component Function无法使用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>

我尝试在函数

上绑定（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)}中有一个简单的语法错误。注意关闭的paren )是不平衡的。

您可能想要的是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>

在前者中，您将在匿名函数中返回函数引用，而不是调用它。