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

我在Event看到target property类型为EventTarget。

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

我没有看到定义合成事件，因此它的目标类型为HtmlInputElement。

Answer 1

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

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-react-eventsa

你想要这样的东西：

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并返回混合时间的函数，这基本上只意味着你不关心函数返回的内容（如果有的话）。

Answer 4

对于React Native：

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

比您只能使用它： onChange: (TextInputEvent) =>

Answer 5

onChange 事件可能看起来像这样（注意使用 currentTarget 代替 target ）：

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

为onChange等提供流注释的类型

5 个答案: