Javascript 在iOS{ ... const{getRootProps，getInputProps，open，inputRef}=useDropzone{ //禁用单击和按下键行为 诺克利克：没错， 没错， }; const handleTap=useCallback=>{ //React Dropzone创建的打开对话框的特定函数 打开 //还尝试使用ref直接触发输入单击，但已确认输入被正确引用 inputRef.current.click； }，[AllowerAct，上传，打开]； 回来 {儿童} ; };

我在较旧的iOS设备上触发打开文件对话框时遇到了一个问题，特别是在仍然运行iOS 12的设备上

我正在使用React Dropzone软件包为文件创建Dropzone，但也添加了一种方法，可以在该区域设置选项卡，打开文件对话框来选择文件

然后，我使用Hammerjs来检测onTab事件

通过添加调用onTab时要触发的警报，我可以确定的是，onTab事件正在触发，并且用于打开对话的函数不会触发文件对话在较旧的iOS设备上打开

const FileUploadDropzone==>{ ... const{getRootProps，getInputProps，open，inputRef}=useDropzone{ //禁用单击和按下键行为 诺克利克：没错， 没错， }; const handleTap=useCallback=>{ //React Dropzone创建的打开对话框的特定函数 打开 //还尝试使用ref直接触发输入单击，但已确认输入被正确引用 inputRef.current.click； }，[AllowerAct，上传，打开]； 回来 {儿童} ; }; 据我所知，输入不能将样式设置为display:none，如果设置为display:none，则无法通过编程触发打开文件对话框

因此，我将样式设置如下：

输入{ 可见性：隐藏； 高度：0px； 宽度：0px； } 我还尝试将输入和传递给组件的子元素包装在标签中，希望单击标签打开对话会得到更好的支持，但即使这样也不行

---

因此，现在我不知所措，我不知道如何在这些较旧的iOS<12设备上实现这一点。

这个问题似乎与这样一个问题有关，即iOS 12上的Safari不喜欢在自定义单击事件和以编程方式调用输入单击事件之间存在任何延迟。因为在我的例子中，输入被深深地嵌套在DOM中，所以当事件冒泡需要很长时间时，就会引起问题

为了解决这个问题，我必须创建一个hack，将文件输入附加到DOM中，使其尽可能地浅化孙子

我跟随本文使用React.createPortal将输入附加到组件之外

我创建了一个函数，在React应用程序顶部的底部创建一个空div

函数UsePortalCSSelector{ const rootElemRef=React.useRefdocument.createElement'div'； 使用效果 功能设置元素{ const{current}=rootElemRef； const parentElem=document.querySelectorcssSelector； parentElem？.appendChildcurrent； 返回函数删除{ 当前。删除； }; }, [id] ; 返回rootElemRef.current； } 然后创建了一个组件，该组件将其子组件附加一个自定义div，由上面的函数创建

const Modal={children}=>{ const target=usePortal'react-root-div'； 返回ReactDOM.createPortalchildren，目标； }; 然后简单地用模态组件包装输入元素，它将几乎追加到DOM树的底部

    <Modal>
        <input {...getInputProps()} />
    </Modal>