我正在尝试编写一个函数来处理鼠标
和触摸
事件。通过结合React.TouchEvent
和React.MouseEvent
两个接口(interface),
像:
onStart = (event: React.TouchEvent | React.MouseEvent) => {
event.persist();
console.log('event ', event);
if (event.touches) {
console.log(event.touches);
}
if (event.screenX) {
console.log(event.screenX);
}
};
日志为我提供了预期的输出,并且我没有收到任何控制台错误,它按我的预期运行。但我的编辑器出现错误:
Error:(94, 22) TS2339: Property 'screenX' does not exist on type 'MouseEvent | TouchEvent'. Property 'screenX' does not exist on type 'TouchEvent'.
和
Error:(90, 13) TS2339: Property 'touches' does not exist on type 'MouseEvent | TouchEvent'. Property 'touches' does not exist on type 'MouseEvent'.
如何使用接口(interface) React.TouchEvent
和 React.MouseEvent
而不会出现所有这些错误?
最佳答案
通过检查条件中的 instanceof TouchEvent
和 instanceof MouseEvent
并使用 event
内的 nativeEvent
属性,可以毫无错误地访问每个单独的接口(interface)。
onStart = (event: React.SyntheticEvent) => {
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);
}
};
关于reactjs - MouseEvent 和 TouchEvent 接口(interface)的 React Typescript 事件类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54688147/