如何解决 typescript Reactjs 中的 onClick 问题

Question

我的 function 是这样的：

async function handleFavorites(event: MouseEvent) {
 event.preventDefault();
}

在我的按钮上，我使用 onclick 来调用这个 function 但它不起作用

<button
 type="submit"
 value={favorites}
 onChange={e => setFavorites(e.currentTarget.value)}
 onClick={() => { 
   handleFavorites();
 }}
>

错误：预期为 1 arguments，但得到 0。未提供“事件”的参数。

有谁知道如何解决？ 或有任何提示？

Answer 1

问题是您没有将事件参数传递给您的处理程序。 这应该有效：

<button
 type="submit"
 value={favorites}
 onChange={e => setFavorites(e.currentTarget.value)}
 onClick={handleFavorites}
>

Answer 2

您无需再次向 onclick 写入函数。 试试这个方法。

 function handleFavorites(e) { e.preventDefault(); } onClick={handleFavorites}

Answer 3

onClick={(e) => { handleFavorites(e); }}

或者

onClick={handleFavorites}

Answer 4

React 有自己的“合成事件” ，它封装了底层的原生 DOM 事件。 您问题的核心是合成事件和本地事件之间的混淆。 您的handleFavorites方法当前需要一个本机事件，而button onClick提供一个合成事件。 使用您当前的类型，您实际上可以这样做onClick={e => handleFavorites(e.nativeEvent)} ，尽管我不推荐它。

您希望将回调传递为onClick={handleFavorites}的其他人都是正确的。 但为了做到这一点，您的handleFavorites需要接受一个合成事件。 React 和 DOM 都有自己的同名MouseEvent接口，因此您需要确保使用正确的接口。

1. 您可以将类型更改为(event: React.MouseEvent) ，这清楚地表明这是反应合成事件。
2. 您可以保留(event: MouseEvent)并将反应版本导入您的文件import React, {MouseEvent} from "react";

请注意，本机事件和合成事件都具有preventDefault()方法，因此切换类型不需要更改 function。