Question

我正在尝试在 useEffect 钩子中自动打开 input type =“ file” 对话框。但这有时可行，有时却没有。可能是什么问题？

这是我的输入

<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

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

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

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

还尝试检查Hooks FAQ page和React Effect Hook Introduction page或Rules of Hooks in the React Documents page。

Answer 2

它是我的 loadFile 函数。

  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);
  }

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

如何自动打开html5输入type =“ file”？

2 个答案: