箭头函数在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>

- psj01

---

你的第一个监听器定义了一个箭头函数表达式，但从未调用它。这就像编写onclick="arrFunc;"一样。 - Bergi

不使用箭头函数，只使用<input type="button" name="aBtn1" value="Test" onclick="console.log('test button clicked');" />怎么样？ - Thomas

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>

- Yury Tarabanko

Answer 2

< p > onclick 属性的值是一个函数的主体。

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

您从未调用该函数。 您从未将该函数分配给变量。 您从未对该函数执行任何操作。

- Quentin

Answer 3

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

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

- mosaic

---

无法重现您的方法，删除花括号和分号，即 onclick="() => console.log('test button clicked')"，或者我理解错了吗？ - Jürgen Fink