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

【问题标题】：What's the difference using 'event' as parameter in these formats?在这些格式中使用“事件”作为参数有什么区别？
【发布时间】：2021-07-12 06:25:40
【问题描述】：

我的项目中有一个事件处理函数，它以“事件”作为唯一参数。项目中只有一种格式。例如。如果在函数体中添加一行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
}

【问题讨论】：

【解决方案1】：

看起来sendClickEvent 是用一个对象调用的，该对象有一个名为event 的属性。结果：

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

之所以有效，是因为{ event: e } 从对象参数中解构了event 属性，并将事件放入名为e 的变量中。但是

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

不起作用，因为参数是围绕它的对象包装器，而不是事件本身。你需要类似的东西

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

由于这是 TypeScript，我也强烈建议不要使用 any，因为这会有效地禁用类型检查，从而破坏使用 TypeScript 的全部目的。找出应该调用函数的确切类型，然后键入函数，这样您就不必在任何地方使用any。可能类似于

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

【讨论】：