如何在“ react-cropper”中的下一个Modal Open上删除先前上传的图像实例？

Question

我正在使用此库：https://github.com/roadmanfong/react-cropper。我的项目与上传图像并将图像的base64值发送到api /后端有关。我面临的问题是，当我上传图像并单击“关闭”或“保存”按钮，然后再次打开模态时，它将显示以前上传的图像。在这种情况下，不应在此处看到该图像，我进行了搜索，发现应该删除该实例，但是我无法找出正确的方法。

这是我工作过的一个codesandbox示例。 https://codesandbox.io/embed/32zo9wlx15

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Cropper from "react-cropper";
import "cropperjs/dist/cropper.css";
import "bootstrap/dist/css/bootstrap.min.css";
import { Modal, ModalBody, ModalFooter, Button } from "reactstrap";

class ImageModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false,
      src: "",
      imgBase64: ""
    };
  }

  toggleImageModal = () => {
    this.setState({ modal: !this.state.modal });
  };

  onImageModalOpened = () => {
    this.setState({src: ''});
  };

  getImg = e => {
    e.preventDefault();
    var files = e.target.files;
    if (files && files.length) {
      this.setState({ files: files });
      const reader = new FileReader();
      reader.onload = () => {
        var image = reader.result;
        var base64Output = image.replace(/^data:image\/(png|jpg|jpeg);base64,/,"");
        this.setState({ src: image, imgBase64: base64Output });
      };
      reader.readAsDataURL(files[0]);
    } else {
      const reader = new FileReader();
      reader.onload = () => {
        var image = reader.result;
        var base64Output = image.replace(/^data:image\/(png|jpg|jpeg);base64,/,"");
        this.setState({ src: image, imgBase64: base64Output });
      };
      reader.readAsDataURL(this.state.files[0]);
    }
  };

  saveImage = e => {
    e.preventDefault();
    const { imgBase64 } = this.state;
    console.log(imgBase64);
  };

  rotateLeft = e => {
    e.preventDefault();
    return this.cropper.rotate(-45);
  };

  rotateRight = e => {
    e.preventDefault();
    return this.cropper.rotate(45);
  };

  render() {
   return (
      <div>
        <Button color="danger" onClick={this.toggleImageModal}>Open Modal</Button>
        <Modal isOpen={this.state.modal} toggle={this.toggleImageModal} onOpened={this.onImageModalOpened} className="modal-dialog modal-lg">
          <form onSubmit={this.saveImage}>
            <ModalBody>
              <Cropper
                ref={cropper => {this.cropper = cropper;}}
                src={this.state.src}
                crop={this.cropLocation}
                viewMode={2}
                responsive={true}
                restore={false}
                modal={true}
                guides={false}
                center={true}
                highlight={true}
                background={true}
                autoCrop={true}
                movable={true}
                rotatable={true}
                scalable={true}
                zoomable={false}
                cropBoxMovable={true}
                cropBoxResizable={true}
                toggleDragModeOnDblclick={true}
              />
              <div>
                <input type="file" id="inputImage" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff" onChange={this.getImg}/>
                <button onClick={this.rotateLeft}>Rotate Left</button>
                <button onClick={this.rotateRight}>Rotate Right</button>
              </div>
            </ModalBody>
            <ModalFooter>
              <button type="button" className="btn btn-sm btn-danger" onClick={this.toggleImageModal} > Close </button>
              <button type="submit" className="btn btn-sm btn-info">Save</button>
            </ModalFooter>
          </form>
        </Modal>
      </div>
    );
  }
}

ReactDOM.render(<ImageModal />, document.getElementById("root"));

我只是无法更正确地弄清楚它，但是我一直在做很多事情。任何帮助表示赞赏。谢谢！