不可分配类型用于事件监听器

Question

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

TS2345：类型为“(event: React.MouseEvent) => void”的参数不能赋值给类型为“EventListenerOrEventListenerObject”的参数。

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

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

- Jimmy

Answer 1

tldr

将handleClickOutside事件类型从React.MouseEvent更改为本机的MouseEvent：

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

Playground

---

更多信息

在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

通过使用 document.addEventListener 直接添加点击监听器到 DOM 的回调类型为：

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

相关: ReactJS SyntheticEvent stopPropagation() 只在 React 事件中生效吗？

- ford04

---

谢谢！这是有道理的，因为创建 addEventListener 是在 React 之外完成的，或者至少从监听器传递的事件是本地的。 - TrySpace