在這些格式中使用“事件”作為參數有什么區別？

Question

我的項目中有一個事件處理函數，它以“事件”作為唯一參數。項目中只有一種格式有效。 例如，如果將一行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
}

Answer 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地方使用any 。 也許類似的東西

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