react js react-dropzone 頁面加載時自動開啟

Question

我正在使用react-dropzone ，我想在頁面加載后立即自動打開文件上傳對話框。

我編寫了以下代碼，但我無法理解如何使其自動打開，這將是我對ref做錯了什么，因為我可以訪問它的屬性。

你能幫我個忙嗎？

鏈接： codesandbox

import React from "react";
import { useDropzone } from "react-dropzone";
import { Chip } from "@material-ui/core";
import { AttachFile } from "@material-ui/icons";

const Dropzone = React.forwardRef(
  ({ multiple = false, onOperation, onDelete }, ref) => {
    const [myFile, setMyFile] = React.useState([]);

    const inputRef = React.useRef(null);
    //const inputRef = React.createRef();
    React.useImperativeHandle(
      ref,
      () => ({
        upload: () => inputRef.current
      }),
      [inputRef]
    );

    const onDrop = React.useCallback(
      (acceptedFiles) => {
        setMyFile([...acceptedFiles]);
        onOperation(acceptedFiles);
      },
      [myFile, onOperation]
    );

    const { getRootProps, getInputProps } = useDropzone({
      onDrop
    });

    const removeAll = () => setMyFile([]);
    const file = myFile.map((file, key) => (
      <Chip
        key={key}
        icon={<AttachFile />}
        label={`${file.path} - ${file.size} bytes`}
        color="primary"
        onDelete={() => {
          removeAll();
          onDelete && onDelete();
        }}
        style={{
          cursor: "pointer",
          backgroundColor: "#2196f3"
        }}
      />
    ));

    const label = "File";

    return (
      <span {...getRootProps({ className: "drop-zone" })}>
        <input ref={inputRef} {...getInputProps()} multiple={multiple} />
        {file.length > 0 ? (
          file
        ) : (
          <Chip
            icon={<AttachFile />}
            label={label}
            color="primary"
            style={{
              cursor: "pointer",
              backgroundColor: "#2196f3"
            }}
          />
        )}
      </span>
    );
  }
);

export default function App() {
  const onDrop = (file) => console.log(file);
  //const ref = React.useRef(null);
  const ref = React.createRef();

  React.useEffect(() => {
    console.log("Ref:", ref.current, ref.current.upload());
    /*if (ref.current) {
      ref.current.open();
    }*/
  }, []);

  return (
    <div className="App">
      <Dropzone ref={ref} onOperation={onDrop} />
    </div>
  );
}

Answer 1

在App中創建的ref是對Dropzone組件的引用。 通過useImperativeHandle ，該 ref 有一個屬性，即upload - 一個 function ，它返回一個input元素或null 。

不知何故，該值始終是null 。 起初我認為這個問題與執行順序有關。 但事實並非如此。 這是您的ref={inputRef}被{...getInputProps()}覆蓋，其中包括它自己的ref屬性。 如果您切換順序並將您的ref放在最后，那么您將開始記錄<input>元素。

但是現在單擊該圖標不會執行任何操作，因為 react-dropzone package 取決於我們覆蓋的 ref。

幸運的是useDropzone鈎子返回一個inputRef 。 因此，相同的 ref 可用於內部 react-dropzone 邏輯和您的自定義邏輯。 它還返回一個open的 function 供您使用。

我刪除了您的inputRef並使用open的 function 作為ref.upload的值。

const { getRootProps, getInputProps, open } = useDropzone({
  onDrop
});

React.useImperativeHandle(
  ref,
  () => ({
    upload: open
  }),
  [open]
);

我沒有問題讓它在點擊時打開。 但不幸的是@Marios Nikolaou 的評論是正確的。 當我嘗試通過useEffect打開它時，我在控制台中收到警告：

文件選擇器對話框只能在用戶激活時顯示。

所以你想要的是不可能的。