为onChange等提供流注释的类型

Question

我有以下组件:

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类型:

我可以在这里看到具有类型的目标属性的事件.EventTarget

但从EventTarget 定义来看,我没有看到任何有价值的定义.

我没有看到定义合成事件,因此它具有HtmlInputElement类型的目标.

Answer 1

正如TLadd所说,SyntheticInputEvent是你想要的参数.但是它需要一个类型参数,所以你需要创建它SyntheticInputEvent<HTMLInputElement>.

Answer 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 -反应事件

您想要这样的东西：

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

Answer 3

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

所以 onChange 的类型是

{ 
   onChange: (SyntheticInputEvent) => mixed,
}

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