时间戳

首页 > 解决方案 > 在函数调用中组合 React HTML DOM 事件时处理类型

reactjs - 在函数调用中组合 React HTML DOM 事件时处理类型

问题描述

问题：有没有办法在 Typescript 中组合不同 HTML DOM 事件的类型？

（我知道我可以通过将我的函数拆分为两个不同的函数来避免这个错误，但我想避免这种情况）

我的组件看起来与此类似：

const TestComponent: React.FC = () => {
const handleFileChange = (e: React.DragEvent | React.SyntheticEvent) => {
  const fileData = e.dataTransfer || e.target;
});

return (
  <div>
    <div onDrop={handleFileChange} />
    <input type="file" onChange={handleFileChange} />
  </div>
)};

我得到的错误e.dataTransfer在函数内部handleFileChange：

Property 'dataTransfer' does not exist on type 'SyntheticEvent<Element, Event> | DragEvent<Element>'.
Property 'dataTransfer' does not exist on type 'SyntheticEvent<Element, Event>'.

我了解此错误以及为什么会发生这种情况，但是我找不到使用打字稿执行此操作的解决方法，我应该查看任何文档参考吗？

标签： reactjstypescript

解决方案

你可以尝试这样的事情。

const TestComponent: React.FC = () => {

  // you can use any value you want as `type`
  const handleFileChange = (type: "input" | "drop", e: React.DragEvent | React.SyntheticEvent) => {
    if (type === "drop") {
      const fileData = (e as React.DragEvent).dataTransfer
    }

    if (type === "input") {
      const target = e.target
    }

    // if there are any other events
  }

  return (
    <div>
      <div onDrop={handleFileChange.bind(null, "drop")} />
      <input type="file" onChange={handleFileChange.bind(null, "input")} />
    </div>
  )
}

只需将类型绑定到事件，因此对于每种event类型，您都可以决定要做什么。

推荐阅读