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;

此问题已更新 - lissettdm 解决了没有后坐力的简化问题，但事实证明我的问题更复杂

Answer 1

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

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

在 Chrome 等其他浏览器中，useEffects 和 useLayoutEffect 将用于显示查找器。但在 Safari 中，只有 useLayoutEffect 有效。

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

1 个答案: