时间戳

首页 > 解决方案 > 在这些格式中使用“事件”作为参数有什么区别？

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

问题描述

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

标签： javascripttypescriptecmascript-6

解决方案

它看起来像是sendClickEvent用一个对象调用的，它有一个名为 的属性event。因此：

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

之所以有效，是因为从 object 参数中{ event: e }解构了属性并将事件放入名为. 但evente

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();

推荐阅读