如何解决打字稿Reactjs中的onClick问题答案

【问题标题】：how to solve the onClick problem in typescript Reactjs如何解决打字稿Reactjs中的onClick问题
【发布时间】：2021-01-31 15:13:56
【问题描述】：

我的功能是这样的：

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

在我的按钮上，我正在使用 onclick 调用此函数，但它不起作用

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

错误：应有 1 个参数，但得到了 0。未提供“事件”的参数。

有人知道怎么解决吗？或者有什么建议？

【问题讨论】：

onClick={e => handleFavorites(e)}?
已经这样试过了，有打字问题
那么函数签名有问题。它可能需要MouseEvent<HTMLButtonElement>。
你有没有找到一个好的解决方案？我对没有 target.value 属性的按钮单击的 typescript 事件有完全相同的问题

标签： javascript reactjs typescript react-native

【解决方案1】：

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

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

【讨论】：

已经这样试过了，有打字问题
在这种情况下，MouseEvent 不是正确的类型。通常打字稿会告诉您预期的类型。你可以试试：MouseEvent<HTMLButtonElement>，或FormEvent<HTMLFormElement>。

【解决方案2】：

您无需再次为 onclick 编写函数。试试这个方法。

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

onClick={handleFavorites}

【讨论】：

我需要在函数中使用FormEvent，打字问题

【解决方案3】：

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

或者

onClick={handleFavorites}

【讨论】：

已经这样试过了，有打字问题
也许从event 输入函数。尝试将其类型设置为 any 而不是 MouseEvent

【解决方案4】：

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

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

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

请注意，原生事件和合成事件都有preventDefault() 方法，因此切换类型不需要更改函数。

【讨论】：