javascript - react 合成事件的流型错误

Question

我实际上正在尝试学习流类型。在我的 React 应用程序中，我有一个可重用的 TextArea 组件，这是 Prop 声明:

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 });
  };

运行流程时出现此错误:

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>事件
• SyntheticAnimationEvent<T>对于动画事件
• SyntheticCompositionEvent<T>对于 CompositionEvent
• SyntheticInputEvent<T>对于输入事件
• SyntheticUIEvent<T>对于 UIEvent
• SyntheticFocusEvent<T>对于 FocusEvent
• SyntheticKeyboardEvent<T>对于键盘事件
• SyntheticMouseEvent<T>鼠标事件
• SyntheticDragEvent<T>对于 DragEvent
• SyntheticWheelEvent<T>对于 WheelEvent
• SyntheticTouchEvent<T>对于 TouchEvent
• SyntheticTransitionEvent<T>对于 TransitionEvent

引用:https://flow.org/en/docs/react/events