javascript - react js react-dropzone 页面加载时自动开启

问题描述

我正在使用react-dropzone，我想在页面加载后立即自动打开文件上传对话框。

我编写了以下代码，但我无法理解如何使其自动打开，这将是我做错了，ref因为我可以访问它的属性。

你能帮我个忙吗？

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

标签： javascriptreactjsreact-hooksreact-dropzonereact-forwardref

解决方案

ref创建的是对您的组件App的引用。Dropzone通过useImperativeHandle，该 ref 具有一个属性，即upload- 一个返回input元素或null.

不知何故，价值总是null。起初我认为这个问题与执行顺序有关。但事实并非如此。这是你ref={inputRef}的被覆盖，{...getInputProps()}其中包括它自己的ref财产。如果您切换顺序并放ref最后一个，那么您将开始记录该<input>元素。

但是现在点击图标并没有做任何事情，因为 react-dropzone 包依赖于我们覆盖的 ref。

幸运的是，useDropzone钩子返回一个inputRef. 因此，相同的 ref 可用于内部 react-dropzone 逻辑和您的自定义逻辑。它还返回一个open您可以使用的函数。

我删除了您的inputRef并将该open函数用作的值ref.upload。

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

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

我没有问题让它在点击时打开。但不幸的是@Marios Nikolaou 的评论是正确的。当我尝试通过 a 打开它时useEffect，我在控制台中收到警告：

文件选择器对话框只能在用户激活时显示。

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

javascript - react js react-dropzone 页面加载时自动开启

问题描述

解决方案

推荐阅读