javascript - React.js文件上传UI拖放不起作用

Question

我正在尝试为我的 react.js 应用程序编写文件上传。但是，我无法让拖放区正常工作。即使我停止传播并阻止拖放事件的默认值，它仍然无法按预期工作。浏览器仍然打开我的文件。

export default function DraggableUploader() {

    const fileInput = useRef(null)
    const [loadedFile, setLoadedFile] = useState(null)
    const [isLoading, setIsLoading] = useState(false)

    const handleDragEnter = e => {
        e.preventDefault();
        e.stopPropagation();
      };
    const handleDragLeave = e => {
        e.preventDefault();
        e.stopPropagation();
    };
    const handleDragOver = e => {
        e.preventDefault();
        e.stopPropagation();
    };
    const handleDrop = e => {
        e.preventDefault();
        e.stopPropagation();

    };


    function handleSubmit(e) {
        e.preventDefault()
        console.log(`current file`, loadedFile.name)



    }

    return (
        <div className="dropzone">
            <div className="sub-header">Drag your audio file here:</div>
            <div className="draggable-container">
                <input 
                    type="file" 
                    className="file-browser-input"
                    name="file-browser-input"
                    style={{display: "none"}}
                    ref={fileInput} 
                    onDrop={e => handleDrop(e)}
                    onDragOver={e => handleDragOver(e)}
                    onDragEnter={e => handleDragEnter(e)}
                    onDragLeave={e => handleDragLeave(e)}
                    onChange={handleInputChange}  
                />


                <div className="file-browser-container">
                    <Button variant="outline-primary" onClick={handleInputClick}>Browse</Button>

                </div>

            </div>
            <Button variant="primary" onClick={handleSubmit}>Submit</Button>
        </div>
    )
}

标签： javascriptreactjsinputdrag-and-dropdom-events

Answer 1

显然我没有 useEffect 来添加事件侦听器。如果添加以下代码，所有工作都按预期工作：

useEffect(() => {
        let div = dropRef.current;
        div.addEventListener('dragenter', handleDragEnter);
        div.addEventListener('dragleave', handleDragLeave);
        div.addEventListener('dragover', handleDragOver);
        div.addEventListener('drop', handleDrop);
        return function cleanup() {
          div.removeEventListener('dragenter', handleDragEnter);
          div.removeEventListener('dragleave', handleDragLeave);
          div.removeEventListener('dragover', handleDragOver);
          div.removeEventListener('drop', handleDrop);
        };
      });