React dropzone 清除文件答案

【问题标题】：React dropzone clears filesReact dropzone 清除文件
【发布时间】：2022-09-29 19:25:24
【问题描述】：

我正在使用 React Dropzone 库进行文件上传。我注意到每次单击文件框时文件都会清除。例如，如果您添加一个文件，然后再次单击该框以添加另一个文件，则原始文件将消失。我曾尝试在 dropzone 中使用 onDrop 函数，但我无法确定我们的。我是 React 的新手，所以我很想知道在哪里可以找到这方面的信息。

你可以在这里阅读用法react-dropzone.js.org。

标签： reactjs react-dropzone

【解决方案1】：

react dropzone 有一个参数名称 multiple 如果你想让用户选择/拖动多个文件，你可以指定它。这个参数的默认值为 true 所以这就是我使用库的方式：

  const { getRootProps, getInputProps } = useDropzone({
    accept: '.jpeg,.png,.jpg',
    onDrop: acceptedFiles => {
      if (acceptedFiles.length === 0) {
        return;
      }
      const newFiles = acceptedFiles.map(file => {
        return {
          file,
          preview: URL.createObjectURL(file),
        };
      });
 let newFilesState = [...files.concat(newFiles)];
    //here i add the previously added files to new state and concat them with newly droped files
    },
  });

这是我的 jsx

  <Button onClick={() => {
                inputEl.current.click();
              }}
            >
    <div {...getRootProps()}>
                <input
                  // force input to re-render on file change
                  {...getInputProps()}
                  ref={inputEl}
                />
              </div>
 </Button>

请注意，名为 files 的变量是我的 redux，它存储了以前添加的文件。在我收到一个删除/选择的新文件后，将它们与我存储在 redux 中的文件连接起来

【讨论】：