javascript - 如何细化 Flow 中的综合事件？

Question

所以我有一个处理程序，它接受不同类型的 SyntheticEvent 并使用以下代码:

    defaultProps = {
            events: [
                'mousemove',
                'keydown',
                'wheel',
                'DOMMouseScroll',
                'mouseWheel',
                'mousedown',
                'touchstart',
                'touchmove',
                'MSPointerDown',
                'MSPointerMove',
            ],
            element:
              (typeof window === 'undefined' ? 'undefined' : typeof window) ===
            'object'
                ? document
                : {},
    }

    componentDidMount() {
            this.props.events.forEach((eventName: string) => {
                if (this.props.element) {
                    this.props.element.addEventListener(
                        eventName,
                        this.handleEvent(),
                    );
                }
            });
    }    
    handleEvent = (event: SyntheticEvent<*>): void => {
          if (event instanceof MouseEvent) {
            // This event is a MouseEvent.
          } else if (event instanceof KeyboardEvent) {
          } else {
          }
        }

但是，上面的代码会抛出一个错误，提示 MouseEvent(此类型与 SyntheticEvent 不兼容) 与 KeyboardEvent 相同。起初我认为 SyntheticEvent 是所有事件的捕获所有类型。

Answer 1

所以我的主要问题是区分 SyntheticEvent 和 Event 类。我最初认为所有 Event 都会在 React 中转换为 SyntheticEvent。

添加事件监听器(例如 element.addEventListener)时，回调会发出 Event 对象，而不是 SyntheticEvent。我使用的是 addEventListener 而不是组件的 onClick 属性。