在这些格式中使用“事件”作为参数有什么区别?

hwazgwia  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(280)

我的项目中有一个事件处理函数,它将“event”作为唯一的参数。项目中只有一种格式。e、 g.如果一行 console.log 添加到函数体时,它将仅以第一种格式显示。
该框架是基于react的内部框架,也使用web组件。
这些格式之间有什么区别?
所有三种格式都具有相同的函数体。
格式1,在我的项目中工作:

public sendClickEvent = ({ event: e }) => {
  e.preventDefault();
  // handler body
}

格式2,不适用于我的项目:

public sendClickEvent = (event: any) => {
   event.preventDefault();
  // handler body
}

格式3,不适用于我的项目:

public sendClickEvent(event: any): void {
   event.preventDefault();
  // handler body
}
xoshrz7s

xoshrz7s1#

看起来像 sendClickEvent 使用具有名为的属性的对象调用 event . 因此:

public sendClickEvent = ({ event: e }) => {
  e.preventDefault();

因为 { event: e } 解构 event 属性,并将事件放入名为 e . 但是

public sendClickEvent = (event: any) => {
   event.preventDefault();

无法工作,因为参数是围绕它的对象 Package 器,而不是事件本身。你需要像这样的东西

public sendClickEvent = (obj) => {
   obj.event.preventDefault();

由于这是typescript,我也强烈建议不要使用 any ,因为这实际上禁用了类型检查,破坏了使用typescript的整个目的。找出调用函数的确切类型,并按此类型键入函数,这样就不必使用 any 在任何地方也许是类似于

public sendClickEvent = ({ event: e }: { event: React.MouseEvent }) => {
  e.preventDefault();

相关问题