react的mouseMove监听事件如何获取nativeEvent类型？

Question

<div  onMouseMove={this.mouseMove} />
mouseMove = (event: MouseEvent) => {
    // 提示：类型“MouseEvent”上不存在属性“nativeEvent”
    const e = event.nativeEvent;
};

怎么定义这个event类型才能不报这个提示

Answer 1

通过检查instanceof TouchEvent和instanceof MouseEvent条件并使用nativeEvent内部属性event，可以访问每个单独的接口而不会出错。

onStart = (event: React.TouchEvent | React.MouseEvent) => {
    event.persist();
    console.log('event ', event);
    if (event.nativeEvent instanceof TouchEvent) {
        console.log(event.nativeEvent.touches);
    }

    if (event.nativeEvent instanceof MouseEvent) {
        console.log(event.nativeEvent.screenX);
    }
};

Answer 2

你用的 MouseEvent 是 ts 自带的，是原生事件的类型。
有 nativeEvent 的 MouseEvent 是 react 封装过后的，要从 react 里面引

import { MouseEvent } from 'react';

或者这样写 React.MouseEvent

const mouseMove = (event: React.MouseEvent) => {
    const e = event.nativeEvent;
};

Answer 3

在React中，可以使用onMouseMove生命周期方法来监听鼠标移动事件。在该方法中，可以通过event.nativeEvent获取到原生的MouseEvent对象，该对象包含了鼠标移动的详细信息。因此，可以通过该对象来获取nativeEvent类型。具体示例如下：

Copy code
onMouseMove(event) {
const nativeEvent = event.nativeEvent;
console.log(nativeEvent);
}