Javascript 我的活动没有'；Don’只有在有人叫的时候才开枪

在这个组件中，我有一个按钮，我有一个用于

onClick

事件的函数，

sayHello

为了测试它，我只放了一个

console.log

来查看它是否在单击时触发，但它只在渲染中调用函数

this.sayHello（）

时才会触发

import React，{Component}来自“React”；
从“/AsteroidDetails”导入详细信息；
导出默认类小行星扩展组件{
状态={
百分比化学：[]，
剩余质量：[]，
收益率：[]，
小行星：这个.props.item，
};
说你好=（）=>{
控制台日志（“单击”）；
};
/***计算
*   
剩余m=（质量-当天的所有百分比）
m是小行星的剩余质量：
剩余mpct=（质量-日/质量的所有百分比x 100
mpct是剩余的质量百分比
小行星
*/
/**产量计算
*
*对于mpct>=0,02
*收益率=（0,04+ln（mpct）/100）*m
*
*对于mpct<0,02
*收益率=0
*/
//用于计算化学品百分比的函数
百分比=（数量，每，t）=>{
返回（（个/100）*个/t；
};
//函数获取一个小行星的所有百分比之和
总和百分比=（百分比arr）=>{
返回百分比arr.reduce（函数（a，b）{
返回a+b；
}, 0);
};
//用于剩余质量计算的函数
剩余质量=（质量，总和）=>{
返回质量和；
};
//用于剩余mpct计算的函数
剩余mpct=（质量，总和）=>{
返回（（质量-总和）/质量）*100；
};
//写屈服函数
calcYield=（质量，mptc）=>{
如果（mptc>=0.02）{
返回（0.04+数学对数（mptc）/100）*质量；
}否则{
返回0；
}
};
componentDidMount（）{
console.log（this.props，“组件内部安装的道具”）；//每个小行星的道具
常量质量=this.props.item.mass；
设t=1；
t=t+Math.round（Math.log10（质量））；
设percentageChem=[]；//化学品百分比的空数组
Object.entries（this.props.item.chemicals）.forEach（（[key，value]）=>{
设chem=this.percentage（质量、值、t）.toFixed（2）；//计算化学品的百分比
percentageChem.push（chem）；//将计算的PepRecentage推送到percentageChemicals数组中
});
//设置化学品百分比的状态
这是我的国家({
百分比化学：百分比化学，
});
控制台日志（percentageChem，“化学品百分比”）；
//将百分比化学品的字符串数组更改为数字数组
设numberPercentArray=percentageChem.map（（el）=>parseFloat（el））；
//计算数组中百分比的总和
设sumOfPercentage=this.sumPercentage（numberPercentArray）；
//总日照百分比阵列
const totalSum=固定的百分比总和（2）；
控制台日志（总和，“总和”）；
//使用总质量和总质量计算剩余质量。
const remMass=剩余质量（质量，总和）；
this.setState（{remainingMass:remMass}）；
控制台日志（remMass，“剩余质量”）；
//使用总和和质量计算剩余MPCT。
常数mpct=剩余的mpct（质量，总和）toFixed（2）；
this.setState（{remainingMpct:mpct}）；
控制台日志（mpct，“剩余mpct”）；
//呼叫收益函数
常数周转率=此计算值（mpct，质量）；
this.setState（{0:overship}）；
控制台日志（营业额，“收益率？”）；
}
render（）{
返回(
点击
);
}
}

这是因为每个渲染都调用函数。您需要创建闭包并将函数放入其中

试试这个：

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

{this.sayHello（）}}>单击

我尝试过，但仍然没有成功，我只想看看事件是否触发，然后这个。sayHello应该可以吧？我不想调用函数这在功能上与发布的代码操作相同。请注意，这将解决

sayHello

@Funk中存在任何

此

引用时可能出现的任何绑定问题eyFlo不会解决任何问题，因为

sayHello

是一个箭头函数，因此它已经绑定到组件。您是否有类似

onClick={this.sayHello}

或类似

onClick={this.sayHello（）}的函数

？通常，您可能希望在按钮中添加

type='button'

，HTML中的默认按钮在某些情况下可能是提交按钮，这可能会导致奇怪的副作用（在本例中可能不是问题，值得指出）您的问题是，为什么必须在

render

函数中将

this

放在函数名之前？或者为什么它不起作用。因为您发布的代码应该起作用。我有类似于onClick={this.sayHello}的代码，但是当我单击它时，只有当我像onClick={this.sayHello（）}一样调用它时，它才显示console.log它多次打印console.log该组件是否在表单中？如果是，请遵循@DBS建议。

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