React-Typescript:我想用addEventListener注册React事件处理

Question

问题

我想注册一个带有类型React.MouseEvent参数的事件作为EventListener的侦听器。但是，EventListener正在接受MouseEvent类型的侦听器，并且似乎因为类型不匹配而出现错误。我知道是什么导致了错误，但我不知道如何匹配类型。

※我知道使用any类型不会产生错误，但我不想使用它。

示例代码

当我在框内区域执行mouseMove而mouseDown时，我想在控制台上显示"move“(我使用document.addEventListener是因为我想检测框外区域的mouseMove )。

 const mouseSample: React.FC = () => {
      // eslint-disable-next-line react-hooks/rules-of-hooks
      const [flag, setFlag] = useState(false);
      const handleMouseDown = (): void => {
        setFlag(true);
        document.addEventListener('mouseMove', handleMouseMove);//Error because the event type does not match
        document.addEventListener('mouseup', handleMouseUp);
      };
    
      const handleMouseMove = (event: React.MouseEvent<HTMLElement>): void => {
        if (flag) {
          // eslint-disable-next-line no-console
          console.log('move');
        }
      };
    
      const handleMouseUp = (): void => {
        setFlag(false);
        document.removeEventListener('mouseMove', handleMouseMove);//Error because the event type does not match
        document.removeEventListener('mouseup', handleMouseUp);
      };
    
      return (
        <Box
          style={{
            height: '400px',
            width: '400px'
          }}
          onMouseDown={handleMouseDown}
          onMouseMove={handleMouseMove}
          onMouseUp={handleMouseUp}
        >
          moveBox
        </Box>

Answer 1

这里有两个问题。第一个是一个简单的修复方法-- 'mouseMove'需要是'mousemove'，因为事件名称是小写的，而不是camelCase。

下一个比较难，因为它涉及到React合成事件和底层DOM本机事件之间的差异。handleMouseMove期望React合成事件。想必您的Box组件也会处理合成事件。但是document需要本机事件的侦听器。

您可以从合成事件获取本机事件，但不能从合成事件获取本机事件。所以您的事件处理程序应该处理本机事件。我们使用内置DOM类型中的MouseEvent类型。与React事件类型不同，此MouseEvent不是泛型的。

const handleMouseMove = (event: MouseEvent): void => {

现在，您的document侦听器很好，但是Box有一个问题，因为handleMouseMove不能赋值给onMouseMove。为了解决这个问题，我们可以使用内联箭头函数从React合成事件转到本机事件。

onMouseMove={(e) => handleMouseMove(e.nativeEvent)}