Javascript 单击按钮后，反应组件功能不起作用

组件

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>

this.calAverage）}>单击

单击按钮。。在控制台中解析为无。。。 如果我这样做。。它起作用了

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

console.log（“某物”）}>单击

我试着在函数上绑定（这个）

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

1.在

构造函数中（）

-不工作

---

2.在

onClick

-不工作的

onClick={（）=>this.calcAverage}

中有一个简单的语法错误。请注意不平衡的关闭参数

）

---

您可能需要的是

onClick={（）=>this.calcAlverage（）}

有两种方法可以解决此问题：

解决方案1

this.calAverage（）}>单击

您的代码中缺少

（）

如果您需要

事件

（例如，在需要

事件的情况下，stopPropagation（）

）：

this.calAverage（event）}>单击

解决方案2

单击

这是推荐的方法，因为使用箭头函数绑定事件（如解决方案1中所示）可能会在将来导致性能问题。每次呈现组件时，它都会一次又一次地重新创建相同的事件

替换：

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

this.calAverage）}>单击

与

点击

---

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

将按钮更改为

单击

或

this.calAverage（）}>单击

---

当前，您的

onClick

处理程序只是返回对

this.calaverage

的引用，而不是实际调用它。

尝试使用：ClickonClick={this.calaverage}在渲染循环中解析。。。onClick={（）=>this.calAverage（））}工作得非常好。。但是为什么在我需要（）的地方和我不需要（）的地方。。。关于调用函数onClick