Question

我实际上是在尝试学习flowtype。在我的反应应用程序中，我有一个可重复使用的TextArea组件，这是道具声明：

type props = {
  fill?: boolean,
  large?: boolean,
  blue?: boolean,
  red?: boolean,
  onChange: (
    e: SyntheticEvent<HTMLInputElement> & { currentTarget: HTMLInputElement },
  ) => void,
  value: string
};

当我在其他组件中重用它时：

<TextArea value={this.state.note} onChange={this.changeNote} />

changeNote方法：

  changeNote = (
    e: SyntheticEvent<HTMLInputElement> & { currentTarget: HTMLInputElement },
  ) => {
    this.setState({ note: e.currentTarget.value });
  };

运行flow时出现此错误：

app/components/pages/bills/BillAddPage.js:256
256:           <TextArea value={this.state.note} onChange={this.changeNote} />
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React element `TextArea`
 21:     e: SyntheticEvent<HTMLInputElement> & { currentTarget: HTMLInputElement },
            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ intersection type. Expected polymorphic type instead of. See: app/components/atoms/TextArea.js:21
141:     e: SyntheticEvent<HTMLInputElement> & { currentTarget: HTMLInputElement },
            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ class type: SyntheticEvent

那有什么不对？

Answer 1

您应该使用特定的SyntheticEvent，例如SyntheticInputEvent。

SyntheticEvent<T> for Event
SyntheticAnimationEvent<T> for AnimationEvent
SyntheticCompositionEvent<T> for CompositionEvent
SyntheticInputEvent<T> for InputEvent
SyntheticUIEvent<T>代表UIEvent
SyntheticFocusEvent<T> for FocusEvent
SyntheticKeyboardEvent<T>用于KeyboardEvent
SyntheticMouseEvent<T>用于MouseEvent
SyntheticDragEvent<T>
SyntheticWheelEvent<T> for WheelEvent
SyntheticTouchEvent<T>用于TouchEvent
SyntheticTransitionEvent<T> for TransitionEvent

参考：https://flow.org/en/docs/react/events

react的合成事件

1 个答案: