为 onChange 等提供流注释的类型答案

【问题标题】：What type to give flow annotations for onChange etc为 onChange 等提供流注释的类型
【发布时间】：2017-12-21 06:27:54
【问题描述】：

我有以下组件：

import { identity } from 'lodash';

export const Input = ({
  onChange = identity
  //etc.
}: {
  onChange: Event<HTMLInputElement>,
}) => <Input onChange={onChange} />

但是当我运行流程时，我得到了这个错误：

onChange = identity,
       ^^^^^^^^^^^^^^^^^^^ default value. Expected polymorphic type instead of
onChange = identity,
       ^^^^^^^^ class type: Event

我不知道在哪里可以找到Event 的定义。

如果我查看 facebook 的 dom 类型：

我可以在这里看到Event，它的target property 类型为EventTarget。

但是看着EventTarget definition，我看不到任何价值定义。

我没有看到要定义合成事件以使其具有HtmlInputElement 类型的目标。

【问题讨论】：

标签： reactjs flowtype

【解决方案1】：

Flow 内置了合成事件的定义。在这种情况下，您想要的是 SyntheticInputEvent (https://github.com/facebook/flow/blob/v0.49.1/lib/react.js#L310)

所以 onChange 的类型是

{ 
   onChange: (SyntheticInputEvent) => mixed,
}

一个接受 SyntheticInputEvent 并返回混合时间的函数，这基本上只是意味着您不关心函数返回什么（如果有的话）。

【讨论】：

【解决方案2】：

我会看一下流程文档：

https://flow.org/en/docs/frameworks/react/#adding-types-for-react-events-a-classtoc-idtoc-adding-types-for-react-events-hreftoc-adding-types-for-react-eventsa

你会想要这样的：

class MyComponent extends React.Component {
  onChange(event: Event & { currentTarget: HTMLInputElement }) {
    // ...
  }
}

【讨论】：

这应该是公认的答案！对于这种情况，它比官方文档提供更多信息。

【解决方案3】：

正如 TLadd 所说，SyntheticInputEvent 是您想要的参数。但是它需要一个类型参数，因此您需要将其设为 SyntheticInputEvent<HTMLInputElement>。

【讨论】：

【解决方案4】：

对于 React Native：

import { type SyntheticEvent } from "react-native/Libraries/Types/CoreEventTypes";
type TextInputEvent = SyntheticEvent<{ value: string }>;

你可以使用它： onChange: (TextInputEvent) =>

【讨论】：

【解决方案5】：

onChange 事件可能如下所示（注意使用 currentTarget 而不是 target）：

onChange = (e: SyntheticInputEvent<HTMLInputElement>): void => {
    this.setState({ value: e.currentTarget.value });
}

【讨论】：

SyntheticInputEvent 的目的是什么，它在这里是如何工作的？