关于onClick事件处理函数的问题

Question

老师好，请问下：onClick={ } 为什么中括号内必须写成 onClick={ ()=> addToCart() } ? 我的理解是addToCart已经是一个function了，按理来说，直接onClick= { addToCart() }就可以执行了？ 为什么要加箭头函数呢？ 麻烦阿莱克斯老师解析一下吗？？ 感谢感谢。

Answer 1

hymanzhan 2022-01-10 15:25:57

onClick里要传入的是一个函数的表达式，而不是一个调用函数的指令，因为onClick的作用是注册一个点击事件的处理函数（假设这个函数叫handle）。是在点击事件发生后，这个被注册的函数才会被调用，这时候才会有handle()执行。也就是说：

onClick={ handle }
// 点击的时候执行 handle()

onClick = {() => addToCart()}
// 点击的时候执行 (()=>addToCart())()，其中 ()=>addToCart()是个匿名函数

//所以如果点击事件绑定的处理函数没有参数，也可以写成这样
onClick = {addToCart}
// 点击的时候执行 addToCart()

• 提问者 samLau1984 #1

  谢谢，意思是onClick={ addToCart() } 也是正确的？

• hymanzhan 回复 提问者 samLau1984 #2

  不是，onClick={ addToCart() }是错误的，onClick = {() => addToCart()}是正确的，但如果addToCart函数没有参数，那onClick={ addToCart }也是正确的。
  如果你用了onClick={ addToCart() }，那addToCart()将会在页面第一次渲染的时候执行一次，之后无论你点击还是怎么样都不会再执行了，因为addToCart()没有返回一个函数，所以addToCart()()是没有意义的。你在TS的项目中用onClick={ addToCart() }编译器甚至会报错。
  我觉得你可能需要补充一下基础的JavaScript函数、函数调用、DOM以及事件绑定的概念：
  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Functions
  https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Events
  https://developer.mozilla.org/en-US/docs/Web/Events/Event_handlers

• 提问者 samLau1984 #3

  感谢，但是还是不太明白个中原因，我去查下其他资料。😬

点开查看后面2条评论