我有<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;
此问题已更新 - useLayoutEffect 解决了没有后坐力的简化问题,但事实证明我的问题更复杂
最佳答案
单击事件已触发,但查找器未显示。使用 useLayoutEffect .它在所有 DOM 变更后同步触发:
useLayoutEffect(()=> {
if (inputRef && inputRef.current) {
inputRef.current.click();
}
}, [count])
在 Chrome
等其他浏览器中,useEffects
和 useLayoutEffect
将用于显示取景器。但是在 Safari
中,只有 useLayoutEffect
可以工作。
关于javascript - useEffect 中的 inputFile.current.click() 在 safari 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66783577/