73413


## 疑問点

reactのReact.MouseEvent型を引数に持つイベントをeventListenerのリスナーに登録したいです。  
しかしevenntListenerはmouseEvent型のリスナーを受け付けており、型が合わないためエラーが発生するようです。  
エラーが発生する原因は分かったのですが、どのようにすれば型を合わせることができるのかわかりません。

※any型を使うとエラーは出ませんが、使いたくないです。

## サンプルコード

box内の領域でmouseDownしながらmouseMoveする（Box外の領域でもmouseMoveを検知したいのでdocument.addEventListenerを使っています）とコンソールにmoveと表示したいです。

Boxは`import Box from '@material-
ui/core/Box';`をして使っています。onMouseDown、onMouseMoveは(JSX attribute) `onMouseDown?:
((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) | undefined`です。

[code]

     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);//イベントの型が合わないからエラーになる
            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);/イベントの型が合わないからエラーになる
            document.removeEventListener('mouseup', handleMouseUp);
          };
        
          return (
            <Box
              style={{
                height: '400px',
                width: '400px'
              }}
              onMouseDown={handleMouseDown}
              onMouseMove={handleMouseMove}
              onMouseUp={handleMouseUp}
            >
              moveBox
            </Box>
          );
        };
    
[/code]


CC BY-SA 4.0
2021-01-19T04:47:57.340
73401
2021-01-19T13:29:29.210
2021-01-19T06:50:36.203
3068
43562
question
reactjs typescript
addEventListenerのリスナーにreactのイベント処理を登録したい


`React.MouseEvent`は`BaseSyntheticEvent`を基底として持っており、document.addEventListenerで取得できるイベントは`nativeEvent`から取得できるので変換を行うことで型の整合性が合うと考えられます

[code]

    import * as React from "react";
    import { useState } from "react";
    import { Box } from "@material-ui/core";
    
    export const MouseSample: React.FC = () => {
      // eslint-disable-next-line react-hooks/rules-of-hooks
      const [flag, setFlag] = useState(false);
      const handleNativeMouseMove = (event: MouseEvent) => {
        if (flag) {
          // eslint-disable-next-line no-console
          console.log("move");
        }
      };
      const handleNativeMouseUp = (event: MouseEvent) => {
        document.removeEventListener("mousemove", handleNativeMouseMove);
        document.removeEventListener("mouseup", handleNativeMouseUp);
        setFlag(false);
      };
      const handleNativeMouseDown = (event: MouseEvent) => {
        document.addEventListener("mousemove", handleNativeMouseMove); /
        document.addEventListener("mouseup", handleNativeMouseMove);
        setFlag(true);
      };
    
      // 変換
      const handleMouseMove = (event: React.MouseEvent<HTMLElement>): void => {
        handleNativeMouseMove(event.nativeEvent);
      };
      const handleMouseDown = (event: React.MouseEvent<HTMLElement>): void => {
        handleNativeMouseDown(event.nativeEvent);
      };
      const handleMouseUp = (event: React.MouseEvent<HTMLElement>): void => {
        handleNativeMouseUp(event.nativeEvent);
      };
    
      return (
        <Box
          style={{
            height: "400px",
            width: "400px"
          }}
          onMouseDown={handleMouseDown}
          onMouseMove={handleMouseMove}
          onMouseUp={handleMouseUp}
        >
          moveBox
        </Box>
      );
    };
    
[/code]

## 参考

  * [NativeMouseEventにMouseEventをAliasを張っている箇所](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/v16/index.d.ts#L47)


CC BY-SA 4.0
2021-01-19T13:29:29.210
73413
2021-01-19T13:29:29.210
7997
73401
answer