React-modal: dropzone在退出时激活文件资源管理器

Question

我有一个按钮，可以激活鼠标悬停在dropzone中的模式，

​

​

当我通过单击退出模式时(而不是转义--转义总是有效的)，无论我在哪里单击，容纳该按钮的dropzone都会激活文件资源管理器。

模式是使用react-modal (而不是bootstrap)创建的，并且html为：

<Modal
    isOpen={props.state.show}

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

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

如何避免在单击退出Modal时激活dropzone (react-dropzone)？

Answer 1

问题是，Modal在dropzone中添加了一个覆盖(如果查看DOM树)，所以单击它意味着在dropzone中单击，这将触发dropzone的默认操作，这将打开一个文件资源管理器。

适合您的解决方案是react-dropzone的disableClick属性。由于您已经管理了一个控制模式是否打开的状态，因此可以使用该变量将dropzone的disableClick属性设置为props.state.show，以防止在模式打开时通过单击打开文件资源管理器。

您可以在以下位置查看disableClick示例：https://react-dropzone.js.org/#dropzone