如何为预览标签中的关闭按钮分配ID

问题描述

我需要发送ID到deleteapi来删除文档。

到目前为止，上传工作正常，我能够从xhr获得响应。从此响应中，我将获得一个ID，并且在删除文档时必须传递此ID。每个上传的文档都有唯一的ID。我不知道如何为该dzu-previewButton-关闭按钮分配ID。

import React,{ useEffect,useState } from "react";
import "react-dropzone-uploader/dist/styles.css";
import Dropzone from "react-dropzone-uploader";

import { useParams } from "react-router-dom";

import axios from "axios";

export default function UploadDocumentNew(props) {
  const delurl = props.delurl;

  const [docID,setDocID] = useState(0);

  let { id } = useParams();
  let clientID = id;

  const getUploadParams = ({ file,Meta }) => {
    const body = new FormData();
    body.append("upload_document",file);
    body.append("document_name",Meta.name);
    body.append("document_type",props.documentType);
    body.append("year",props.financialYr);
    body.append("client_id",clientID);
    // console.log("upload ran");

    return {
      url: uploadUrl,body,};
  };

  // called every time a file's `status` changes
  const handleChangeStatus = ({ Meta,file,xhr },status) => {
    if (status == "done") {
      let res = JSON.parse(xhr.response);
      setDocID(res.data.id);
      // this ID has to be assigned/passed as props to the delete file button
    } else if (status == "removed") {
      // this is the ID of selected document.
      deleteFiles(docID).then((response) => {
        console.log("data deleted");
        console.log(response);
      });
    } else {
      console.log("other status");
    }
  };

  const deleteFiles = (docID) => {
    let delUrl = `${deleteUrl}${docID}`;
    return axios.delete(delUrl);
  };

  return (
    <div className="uploadFileBox">
      <Dropzone
        getUploadParams={getUploadParams}
        onChangeStatus={handleChangeStatus}
        // onSubmit={handleSubmit}
        accept=".pdf,.xls,.xlsx,.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        inputContent="Drag to upload or browse File"
      />
      <p>Upload pdf,xlsx,and xls documents</p>
    </div>
  );
}

请帮助我。谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）