React-modal：dropzone在退出

Question

我有一个按钮，可以在鼠标悬停在dropzone内部时激活模态，

当我通过单击退出模态（不转义 - 转义始终有效）时，无论我在哪里点击，包含按钮的dropzone都会激活文件资源管理器。

使用react-modal（不是引导程序）创建模态，html读取：

<Modal
    isOpen={props.state.show}

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

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

单击退出模态时，如何避免激活dropzone（react-dropzone）？

Answer 1

问题是，Modal在dropzone中添加了一个叠加层（如果查看DOM树），因此单击它意味着单击dropzone将触发dropzone的默认操作，该操作将打开一个文件浏览器。

您的解决方案是disableClick的{​​{1}}属性。由于您已经管理了一个控制模态是否打开的状态，因此您可以使用同一个变量将react-dropzone属性设置为disableClick，以防止打开文件资源管理器关于模态打开时的点击次数。

您可以在https://react-dropzone.js.org/#dropzone

查看props.state.show的示例