无法使用react-image-crop裁剪图像

Question

我尝试使用react-image-crop（https://www.npmjs.com/package/react-image-crop/v/6.0.7）裁剪图像。实际上，我无法移动或拉伸裁切区域。我在那里也使用React DragZone上传图像。您能解释我做错了什么吗，可能是什么问题？ React-image-crop css也已导入。有人可以帮忙吗？

import React, {useCallback} from 'react'
import {useDropzone} from 'react-dropzone'
import ReactCrop from 'react-image-crop'
import ReactDOM from "react-dom";
import 'react-image-crop/dist/ReactCrop.css';
import "../Styles/ImageUpload.css"

function ImageUpload(files, addFile) {

  const crop = {
    disabled: false,
    locked: false,
    unit: 'px', // default, can be 'px' or '%'
    x: 130,
    y: 50,
    width: 200,
    height: 200
  }

  const onCrop = (image, pixelCrop, fileName) => { 
  }

  const onImageLoaded = (image) => {
  }

  const onCropComplete = async crop => {
  }

  const onDrop = useCallback((acceptedFiles, rejectedFiles) => {
    if (Object.keys(rejectedFiles).length !== 0) {
    }
    else {
      files.addFile(acceptedFiles);

      let popupBody = document.getElementsByClassName("popup-container")[0];
      popupBody.innerHTML = "";
      let cropElement = (<ReactCrop src = {URL.createObjectURL(acceptedFiles[0])} crop={crop} 
      onImageLoaded={onImageLoaded}
      onComplete={onCropComplete}
      onChange={onCrop} />);

      ReactDOM.render(cropElement, popupBody);

  }, [])

  const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop, noKeyboard: true})

  return (
    <div className = "popup-container">
    <p>Upload new photo</p>
    {  
      (() => {
        if (files.length == undefined) {          
          return (<div>
            <input className = "testinput" {...getInputProps()} />
            <div className = "popup-body" {...getRootProps()}> 
              <img src={require("../Resources/upload-image.png")} className = "image-upload-img"/>                        
              <p style = {{'font-family':'Verdana'}}>Chouse a <b className = "file-manualy- 
              upload">file</b> or drag it here</p>      
            </div> </div>)
        } 
        else {
        }
    })()}

    </div>
  )
}

Answer 1

我不确定为什么要从函数中执行ReactDom.render。这似乎与React是什么相反，并且猜测该库未正确绑定事件。

我建议，用户放下图像后，您可以使用文件阅读器加载图像并将其设置为状态，然后更改显示以显示<ReactCrop src=={this.state.img} />。 crop也需要处于一种状态，以便在更改时更新裁剪矩形。

这是创作者本人的工作示例：https://codesandbox.io/s/72py4jlll6