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

<p:fileUpload onAdd="myOnAddHandler" .... />属性的值是函数的主体。

您已经创建了一个定义箭头功能的功能。

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

Answer 3

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

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

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

3 个答案: