如何解决useEffect 中的 inputFile.current.click() 在 safari 中不起作用
我有 <input type="file" />
并且想在该输入上触发 .click()
。
在 chrome、firefox、edge 中一切正常,但在 safari 中存在问题。
当我点击按钮触发 inputFile.current.click()
时 - 它有效。
但是当它发生在 useEffect/useLayoutEffect 内部时 - 它不起作用(我已经尝试添加超时但它也没有帮助)。
重现问题的工作示例:https://codesandbox.io/s/react-hooks-counter-demo-forked-49n2t?file=/src/index.js
尽可能少的代码来呈现问题
import React,{ useCallback,useState,useEffect,useLayoutEffect,useRef } from 'react';
import { useRecoilState } from 'recoil';
import { requestednewCanvasObjAtom } from '../Slidesstate/slidesAtoms';
const Slide: React.FC = () => {
const [trigger,setTrigger] = useState(false);
const [requestednewCanvasObj] = useRecoilState(requestednewCanvasObjAtom);
const inputFile = useRef(null);
useLayoutEffect(() => {
console.log('IT IS HERE WHEN EXPECTED BUT IT DOES NOT WORK TOO');
inputFile.current.click();
},[requestednewCanvasObj]);
useLayoutEffect(() => {
console.log('IT WORKS');
inputFile.current.click();
},[trigger]);
const triggerUpload = useCallback(() => {
if (inputFile && inputFile.current) {
console.log('IT WORKS');
inputFile.current.click();
}
},[]);
return (
<>
<button onClick={triggerUpload}>Click</button>
<button onClick={() => setTrigger(true)}>Update state to trigger input click</button>
<input type="file" id="file" ref={inputFile} />
</>
);
};
export default Slide;
此问题已更新 - lissettdm 解决了没有后坐力的简化问题,但事实证明我的问题更复杂
解决方法
点击事件被触发,但查找器没有显示。使用useLayoutEffect。它在所有 DOM 突变后同步触发:
useLayoutEffect(()=> {
if (inputRef && inputRef.current) {
inputRef.current.click();
}
},[count])
在 Chrome
等其他浏览器中,useEffects
和 useLayoutEffect
将用于显示查找器。但在 Safari
中,只有 useLayoutEffect
有效。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。