反应的合成事件的flowtype错误

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

运行流程时出现此错误：

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
• AnimationEvent的SyntheticAnimationEvent<T>
• CompositionEvent的SyntheticCompositionEvent<T>
• InputEvent的SyntheticInputEvent<T>
• 用于UIEvent的SyntheticUIEvent<T>
• FocusEvent的SyntheticFocusEvent<T>
• KeyboardEvent的SyntheticKeyboardEvent<T>
• 适用于MouseEvent的SyntheticMouseEvent<T>
• DragEvent的SyntheticDragEvent<T>
• WheelEvent的SyntheticWheelEvent<T>
• TouchEvent的SyntheticTouchEvent<T>
• TransitionEvent的SyntheticTransitionEvent<T>

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