箭头函数不适用于 onClick 事件处理程序

Question

是否可以像我在第一个按钮的 (aBtn1( onclick 事件处理程序上那样使用箭头函数？ 有人可以解释为什么第一种方法失败吗？

<script>
var arrFunc = () => {
console.log('test btn clicked');
};
</script>
<form>
<label for="name">Name</label>
<input type="text" value="" id="name" />
<input type="button" name="aBtn1" value="Test" onclick="() => { console.log('test button clicked'); }" />
<input type="button" name="aBtn2" value="Test" onclick="arrFunc();" />
<input type="submit" value="Submit" />
</form>

Answer 1

第一个选项仅声明一个不调用它的函数。您需要在声明之后调用它。(() => { console.log('test button clicked'); })()这没什么意义，你可以简单地使用该函数的主体。

var arrFunc = () => {
console.log('test btn clicked');
};

<form>
<label for="name">Name</label>
<input type="text" value="" id="name" />
<input type="button" name="aBtn1" value="Test" onclick="(() => { console.log('test button clicked'); })()" />
<input type="button" name="aBtn2" value="Test" onclick="arrFunc();" />
<input type="submit" value="Submit" />
</form>

Answer 2

onclick属性的值是函数的主体。

您已经创建了一个定义箭头函数的函数。

你永远不会调用该函数。您永远不会将该函数分配给变量。你永远不会对该功能做任何事情。

Answer 3

这对我有用：我从 aBtn1 中删除了大括号和分号

这就是我最终得到的 aBtn1：<input type="button" name="aBtn1" value="Test" onclick="(() => console.log('test button clicked'))()" />