如何自动打开html5输入类型= "file"？

Question

我正在尝试在useEffect钩子中自动打开输入类型="文件">对话框。但它有时有效，有时无效。可能是什么问题？

这是我的输入

<input
  id="loadFromPc"
  type="file"
  accept="image/jpeg, image/png"
  onChange={e => loadFile(e)}
/>

这是我的钩子

 useEffect(() => {
    const { search } = window.location;
    if (search && queryString.parse(search).userSelect === 'upload_photo') {
      setTimeout(() => {
        console.log('[setTimeout]');
        document.getElementById('loadFromPc').click();
      }, 1000);
    }
  }, []);

Answer 1

它是我的加载文件函数。

  function loadFile(e) {
    removePopup({
      name: 'image_picker'
    });
    const ff = e.target.files[0];
    const reader = new FileReader();
    reader.onload = () => {
      const image = new Uint8Array(reader.result);
      addLayer(image, image_index, export_size, 'photos', tariff !== null);
    };
    reader.readAsArrayBuffer(ff);
  }

而且我对文件加载没有任何问题。它工作正常

Answer 2

如果问题与多个渲染有关，则可以修改挂钩条件：

if (search && queryString.parse(search).userSelect === 'upload_photo' && document.getElementById('loadFromPc')) {
      setTimeout(() => {
        console.log('[setTimeout]');
        document.getElementById('loadFromPc').click();
      }, 1000);

并在触发点击之前添加对元素是否已完全加载的检查。

还可以尝试查看 Hooks FAQ 页面和 React Effect Hook 介绍 页面或 React 文档页面中的 Hooks 规则。