事件侦听器的不可分配类型

Question

我正在尝试创建一个具有事件侦听器的 TypeScript React 组件。但是，当我这样做时，我收到以下错误消息：

TS2345：“(event: React.MouseEvent) => void”类型的参数不可分配给“EventListenerOrEventListenerObject”类型的参数。

我是否缺少某种类型的检查？谢谢。您可以在下面看到组件代码。

样本组件.tsx：

import * as React from 'react';

interface MyState {
  onClick: boolean;
}

export default class SampleComponent extends React.Component<{}, MyState> {
  private divRef: React.RefObject<HTMLDivElement>;

  public constructor() {
    super({});
    this.state = {
      onClick: false,
    };
    this.divRef = React.createRef();
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }

  public componentDidMount(): void {
    document.addEventListener('mousedown', this.handleClickOutside);
  }

  public handleClickOutside(event: React.MouseEvent<HTMLElement>): void {
    if (
      this.divRef.current.contains(event.target as Node)
    ) {
      this.setState({ onClick: true });
    }
  }

  public render(): React.ReactElement {
    return (
      <div ref={this.divRef}>
        { this.state.onClick ? 'Foo' : 'Bar' }
      </div>
    );
  }
}

Answer 1

域名

将handleClickOutside事件类型从React.MouseEvent原生更改为MouseEvent：

public handleClickOutside(event: MouseEvent): void { ... }

操场

更多信息

React 元素上的事件类型与“传统”DOM 元素上的事件类型不同。

React 有自己的综合 事件处理系统。例如，使用事件委托并document为冒泡事件安装单个事件侦听器。这种偏差体现在类型上。

const MyComp = () => <div onClick={handleClick}></div>

创建以下签名onClick：

/**
 * React.MouseEvent = SyntheticEvent type from React
 * MouseEvent = native DOM event type
 */
(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void

直接添加到 DOM 的点击监听器的回调类型document.addEventListener是：

listener: (this: Document, ev: MouseEvent) => any

相关：ReactJS SyntheticEvent stopPropagation() 仅适用于 React 事件？