React 点击事件的正确类型是什么？答案

【问题标题】：What is the correct type for React Click Event?React 点击事件的正确类型是什么？
【发布时间】：2020-01-15 14:08:27
【问题描述】：

我想为我的事件处理程序使用一种类型，而不是使用任何类型，任何人都可以帮我解决这个问题吗？这是我要重构的代码：

const MyComponent = () => {
  const handleBtnClick = (e: any) => {
    e.stopPropagation();
    //**Some Code**
  }
  return <CustomButton onClick={handleBtnClick} />
}

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

如果您创建 <button> 并将鼠标悬停在 onClick 道具上，您将在工具提示中获得类型：

在您的示例代码中，您正在创建一个自定义按钮，因此类型取决于该组件的实现。

【讨论】：

这并不完全适用 - 我假设您使用的是 Visual Studio Code 或 Webstorm 之类的编辑器 - 但它仍然是一个很好的建议，前提是阅读本文的人正在使用这样的编辑器跨度>
@TKoL 屏幕截图实际上取自 stackblits - 基于浏览器的编辑器。 Typescript 开发工具几乎可以在每个编辑器/IDE 中使用，因为出色的开发工具是人们选择这种语言的主要原因之一。

【解决方案2】：

对于打字，你应该有打字稿，你可以这样做：

const handleBtnClick = (e: React.MouseEvent<HTMLButtonElement>) => { ... }

请参考： https://fettblog.eu/typescript-react/events/

当然你可以不使用 Typescript 试试，但不值得。

希望对你有帮助。

【讨论】：

【解决方案3】：

这似乎是一个合理的解释： https://rjzaworski.com/2018/10/typescript-event-handlers

React.MouseEvent

【讨论】：

【解决方案4】：

我相信你正在寻找的类型是 React.MouseEvent，一个由 React 提供的synthetic event。更多信息和例子可以在here找到。

【讨论】：