reactjs - React ve typescript kullanarak ref ile erişilen div öğesine olay dinleyici nasıl eklenir?

Div öğesine ref kullanarak olay dinleyici eklemek istiyorum.

Wrapper div'e ref div_ref ekliyorum ve component mount olduğunda event listener eklemek için enableDragEventListeners metodunda o div_ref'e erişiyorum.

Aşağıda benim kodum var,

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>
    );
}

Ama 'addEventListener' özelliğinin 'never' türünde mevcut olmadığı hatasını alıyorum. Bunu düzeltmeme biri yardımcı olabilir mi? Teşekkürler.

Düzenle: Tam kod böyle görünüyor... bir sürükle ve bırak bileşeni uyguluyorum, bu yüzden bunu kullanmak isteyen bir bileşeni bunun etrafına sarmak, dosyaları içine sürükleyip bırakabilmesini sağlayacak.

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;

Cevap #1

Sorun :

const div_ref = React.useRef(null); // < --- due to null it type of div_ref becomes null

Çözüm :

const div_ref = React.useRef<any>(null); // <--- Provide type any
// OR
const div_ref = React.useRef<TYPE_OF_WRAPPER>(null); // <--- Provide the type of ref element

Örnek demo : (div elementi ile, tipi kaldırabilir ve kontrol edebilirsiniz, aynı hatayı verecektir )

NOT: Ve bence dropRef.current; div_ref.current; olmalı

Cevap #2

Bu olay dinleyicilerini neden bileşenin ref'i üzerinden manuel olarak eklediğinizden emin değilim, ama bileşen monte edildiğinde bu olay dinleyicilerini eklediğiniz için, bu yöntemleri sentetik olaylara bağlayabilirsiniz.

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

İlgili makaleler