javascript - 如何在 React 中使用 ref 访问 onDrag onDrop 函数？

Question

我创建了一个用于上传文件的 div，在 div 中我使用 type=files 的输入，通过使用 display none 属性隐藏它的默认上传按钮。我正在使用 ref 访问点击事件。现在我担心的是如何让它能够接受拖放以上传文件。我的意思是我如何通过拖动 taht div 来上传文件。这是我上传文件的 div

 <div
  className={styles.container}
  onClick={onButtonClick}
  style={{ opacity: dragging ? 0.5 : 1 }}
  onDragEnter={() => !dragging && setDragging(true)}
  onDragLeave={() => dragging && setDragging(false)}
  onDragOver={onDragOver}
  onDrop={() => inputFileRef && console.log(inputFileRef.current)}
>
  <p className={styles.headingText}>{headingText}</p>
  <p className={styles.helperText}>{helperText}</p>
  <input
    type="file"
    id="file"
    ref={inputFileRef}
    multiple
    onChange={onChange}
    style={{ display: "none" }}
  />
</div>

这是 div 的图像，它通过单击 div 来上传文件，但我还需要通过在这个 div 中放置文件来上传文件。

标签： javascriptreactjsref