inputFile.current.click() 在 useEffect 中不起作用

Question

我有<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;

此问题已更新-使用LayoutEffect解决了没有反冲的简化问题，但事实证明我的问题更复杂

Answer 1

点击事件被触发，但查找器没有显示。使用useLayoutEffect。它在所有DOM突变后同步启动：

useLayoutEffect(()=> {
if (inputRef && inputRef.current) {
inputRef.current.click();
}
}, [count])

在其他浏览器中，如Chrome、useEffects和useLayoutEffect将显示查找器。但在Safari中，只有useLayoutEffect才能工作。

Answer 2

@Żywy将id添加到输入，并添加带有htmlFor属性的标签。

重要：输入元素不得位于标签内

检查此代码笔：https://codesandbox.io/s/react-hooks-counter-demo-forked-7bnut7?file=/src/index.js(点击红色文本(