如何在ReactJs中使用dropzone将文件及其描述添加到状态？

如何解决如何在ReactJs中使用dropzone将文件及其描述添加到状态？

如何使用select-react-dropzone通过选择将一个或多个文件及其描述添加到组件的状态。

我正在使用Reactjs，dropzone和bootstrap，我想要实现的是：添加一个或多个文件（通过将它们拖到某个区域），然后查看已添加文件的列表以及每个文件的选择输入（带有用户定义“类型”的选项）将所有这些信息保存在一个状态中，然后将该信息发送到API。 与图片中出现的内容类似：

到目前为止，我的代码会根据扩展名（pdf，xlsx ...）和拒绝的文件向我返回已接受文件的列表，但是我不知道如何添加选择（具有“来自文件的类型”选项，可以是“摘要”，“报告”，“测试” ...）并将其保存为一种状态，然后将其发送到API。

到目前为止，我使用react-dropzone编写的代码是：

const baseStyle = {
  flex: 1,display: "flex",flexDirection: "column",alignItems: "center",padding: "20px",borderWidth: 2,borderRadius: 20,borderColor: "#26C2E7",borderStyle: "dashed",backgroundColor: "#fafafa",color: "#c4c4c4",outline: "none",transition: "border .24s ease-in-out"
};

const activeStyle = {
  borderColor: "#f2f"
};

const acceptStyle = {
  borderColor: "#f8f"
};

const rejectStyle = {
  borderColor: "#f2f"
};
function InputFiles(props) {
  const {
    acceptedFiles,fileRejections,isDragActive,isDragAccept,isDragReject,getRootProps,getInputProps
  } = reactDropzone.useDropzone({
    accept: ".xlsx,.docx,.pdf"
  });

  const style = React.useMemo(
    () => ({
      ...baseStyle,...(isDragActive ? activeStyle : {}),...(isDragAccept ? acceptStyle : {}),...(isDragReject ? rejectStyle : {})
    }),[isDragActive,isDragAccept]
  );

  const acceptedFileItems = acceptedFiles.map((file) => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));

  const fileRejectionItems = fileRejections.map(({ file,errors }) => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
      <ul>
        {errors.map((e) => (
          <li key={e.code}>{e.message}</li>
        ))}
      </ul>
    </li>
  ));

  return (
    <section className="container">
      {/* <div {...getRootProps({ style })}> */}
      <div {...getRootProps({ style })}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here,or click to select files</p>
        <em>(Only *.pdf,*.xlsx,*.docx files will be accepted)</em>
      </div>
      <aside>
        <h4>Accepted files</h4>
        <ul>{acceptedFileItems}</ul>
        <h4>Rejected files</h4>
        <ul>{fileRejectionItems}</ul>
      </aside>
    </section>
  );
}

ReactDOM.render(<InputFiles />,document.body);

window.onload = function() {
 console.log('onload');
   
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dropzone/11.2.0/index.js"></script>

目标是得到这样的东西：

添加文件及其描述时，必须将它们保存在组件状态下，目的是在单击“保存”时，向API发出POST请求，而在单击“取消”时，必须删除状态信息

解决方法

useDropZone使用回调onDrop，可以使您像这样获得文件名：

 const onDrop = React.useCallback((acceptedFiles) => {
    // Do something with the files
  },[]);
  const { ... } = useDropzone({ onDrop });

一旦每次删除文件都有文件名，就可以将其存储在状态中，显示名称并选择并在每次单击选择时相应地更新该状态。

还要注意，doc说它应该至少是React 16.8，但似乎您使用的是React 16.6。

,

就像@Emmanuel在他的答案中提到的那样，您可以将文件存储在一个状态中，此实现使用名称作为键将文件存储在地图中。

import React,{ useMemo,useState } from "react";
import { useDropzone } from "react-dropzone";

const baseStyle = {
  flex: 1,display: "flex",flexDirection: "column",alignItems: "center",padding: "20px",borderWidth: 2,borderRadius: 20,borderColor: "#26C2E7",borderStyle: "dashed",backgroundColor: "#fafafa",color: "#c4c4c4",outline: "none",transition: "border .24s ease-in-out"
};

const activeStyle = {
  borderColor: "#f2f"
};

const acceptStyle = {
  borderColor: "#f8f"
};

const rejectStyle = {
  borderColor: "#f2f"
};
function InputFiles(props) {
  const [files,setFiles] = useState({});
  const {
    fileRejections,isDragActive,isDragAccept,isDragReject,getRootProps,getInputProps
  } = useDropzone({
    onDrop: (acceptedFiles) => {
      setFiles((prevFiles) =>
        acceptedFiles.reduce(
          (acc,file) => ({
            ...acc,[file.name]: {
              file,fileType: ""
            }
          }),prevFiles
        )
      );
    },accept: ".xlsx,.docx,.pdf"
  });
  const style = useMemo(
    () => ({
      ...baseStyle,...(isDragActive ? activeStyle : {}),...(isDragAccept ? acceptStyle : {}),...(isDragReject ? rejectStyle : {})
    }),[isDragActive,isDragAccept]
  );
  const acceptedFileItems = Object.keys(files).map((fileName) => {
    const currentFile = files[fileName].file;
    const onSelectChange = (e) => {
      e.persist();
      setFiles((prevFiles) => {
        return {
          ...prevFiles,[fileName]: {
            ...prevFiles[fileName],fileType: e.target.value
          }
        };
      });
    };

    return (
      <li key={fileName}>
        <div style={{ display: "flex" }}>
          <span>
            {currentFile.path} - {currentFile.size} bytes
          </span>
          <select value={currentFile.fileType} onChange={onSelectChange}>
            <option value=""></option>
            <option value="summary">summary</option>
            <option value="description">report</option>
            <option value="report">description</option>
          </select>
        </div>
      </li>
    );
  });

  const fileRejectionItems = fileRejections.map(({ file,errors }) => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
      <ul>
        {errors.map((e) => (
          <li key={e.code}>{e.message}</li>
        ))}
      </ul>
    </li>
  ));

  return (
    <section className="container">
      {/* <div {...getRootProps({ style })}> */}
      <div {...getRootProps({ style })}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here,or click to select files</p>
        <em>(Only *.pdf,*.xlsx,*.docx files will be accepted)</em>
      </div>
      <aside>
        <h4>Accepted files</h4>
        <ul>{acceptedFileItems}</ul>
        <h4>Rejected files</h4>
        <ul>{fileRejectionItems}</ul>
        <button onClick={() => console.log(files)}>console log files</button>
      </aside>
    </section>
  );
}

export default InputFiles;

您可以在https://codesandbox.io/s/react-drop-zone-select-vhc2l上查看它的工作情况