如何使用 React 和 TypeScript 将事件侦听器添加到通过 ref 访问的 div 元素？

Question

我想使用 ref 将事件侦听器添加到 div 元素。

我将 ref div_ref 添加到 Wrapper div 并在 enableDragEventListeners 方法中访问该 div_ref，以将事件侦听器添加到 componentmount 上。

下面是我的代码，

const SomeComponent: React.FC<any> = props => {
    const div_ref  = React.useRef(null);
    React.useEffect(() => {
        const enableDragEventListeners = () => {
            const div = dropRef.current;
            if (div) {
                div.addEventListener('dragenter', handleDragIn); // get error here
                div.addEventListener('dragleave', handleDragOut); //error here
                div.addEventListener('dragover', handleDrag);//error here
                div.addEventListener('drop', handleDrop);//error here
            } 
        };
        enableDragEventListeners();
    }, []);

    return (
        <Wrapper ref={div_ref}>
           {dragging && <Overlay>{props.children}</Overlay>}
        </Wrapper>
    );
}

但我收到错误属性 addEventListener 在类型“从不”上不存在。有人可以帮我解决这个问题吗？谢谢。

编辑：完整的代码如下所示...我正在实现一个拖放组件，因此将其包装在想要使用它的组件周围，以便能够将文件拖放到其中。

const DragAndDrop: React.FC<any> = props => {
    const dropRef = useRef(null);
    const [dragging, setDragging] = useState(false);
    const [dragCounter, setDragCounter] = useState(0);
    React.useEffect(() => {
        // componentDidMount()
        const handleDrag = (e: any) => {
            if (!props.loading) {
                e.preventDefault();
                e.stopPropagation();
            }
        };

        const handleDragIn = (e: any) => {
            if (!props.loading) {
                e.preventDefault();
                e.stopPropagation();
                setDragCounter((prev: number) => prev + 1);
                if (e.dataTransfer.files) {
                    setDragging(true);
                }
            } 
        };

        const handleDragOut = (e: any) => {
            if (!props.loading) {
                e.preventDefault();
                e.stopPropagation();
                setDragCounter((prev: number) => prev - 1);
                if (dragCounter === 0) {
                    setDragging(false);
                }
            }
        };

        const handleDrop = (e: any) => {
            if (!props.loading) {
                e.preventDefault();
                e.stopPropagation();
                setDragging(false);
                if (e.dataTransfer.files && e.dataTransfer.files.length > 0){ 
                    props.handle_drop(e);
                    e.dataTransfer.clearData();
                   setDragCounter(0);
                }
            }
       };
       const enableDragEventListeners = () => {
           const div = dropRef && dropRef.current;
           if (div) {
               div.addEventListener('dragenter', handleDragIn);
               div.addEventListener('dragleave', handleDragOut);
               div.addEventListener('dragover', handleDrag);
               div.addEventListener('drop', handleDrop);
           }
       };
       const disableDragEventListeners = () => {
           const div = dropRef && dropRef.current;
           div.removeEventListener('dragenter', handleDragIn);
           div.removeEventListener('dragleave', handleDragOut);
           div.removeEventListener('dragover', handleDrag);
           div.removeEventListener('drop', handleDrop);
       };
       setDragCounter(0);
       enableDragEventListeners();
       return () => {
           // componentWillUnmount()
           disableDragEventListeners();
       };
   }, [dragCounter, props]);

   return (
       <wrapper ref={dropRef}>
           {dragging && <Overlay>{props.children}</Overlay>}
       </Wrapper>
   ); 
};

const DropZone = styled.div``;

export default DragAndDrop;

Answer 1

我不确定为什么要通过组件的引用手动添加这些事件侦听器，但由于您是在安装组件时添加这些事件侦听器，因此您可以将这些方法绑定到合成事件。

<Wrapper 
  ref={div_ref}
  onDragEnter={handleDragIn}
  onDragLeave={handleDragOut}
  onDragover={handleDrag};
  onDrop={handleDrop}
>