javascript - react 模式 : dropzone activates file-explorer upon exit

Question

我有一个按钮，可以在鼠标悬停时激活嵌套在拖放区内的模式，

当我通过单击退出模式时(不是转义——转义始终有效)，无论我单击何处，包含按钮的放置区都会激活文件资源管理器。

模态是使用 react-modal (不是 bootstrap)创建的，html 内容如下:

<Modal
    isOpen={props.state.show}

    onRequestClose={props.handleClose}
    shouldReturnFocusAfterClose={false}

    shouldCloseOnOverlayClick={true}
    shouldCloseOnEscape={true} >
    ...
 </Modal>

单击退出模态框时如何避免激活拖放区(react-dropzone)？

Answer 1

问题是，Modal 在 dropzone 内添加了一个覆盖层(如果查看 DOM 树)，因此单击它意味着单击 dropzone，这将触发 dropzone 的默认操作，即打开一个文件浏览器。

您的解决方案是disableClick react-dropzone的属性(property)。由于您已经管理了控制模式是否打开的状态，因此您可以使用同一变量来设置 disableClick属性至props.state.show对于dropzone这可以防止在模式打开时点击打开文件资源管理器。

您可以查看 disableClick 的示例在:https://react-dropzone.js.org/#dropzone