如何用easy-crop创建模态以形式上载React

Question

我正在尝试使用React-Easy-crop裁剪图像，然后通过形式将其上传到Django Rest API。我是React的新手，并且我看到的教程仅显示一个图像，而我想使其适用于形式的3个输入字段。我有一个带有所有农作物工具的儿童组成部分：

export function CropEasy(myImage, setOpenCrop) {
    let [crop, setCrop] = useState({ x: 0, y: 0 })
    let [zoom, setZoom] = useState(1)
    let [rotation, setRotation] = useState(0)
    let [croppedAreaPixels, setCroppedAreaPixels] = useState(null)
    let cropComplete = (croppedArea, croppedAreaPixels) => {
        setCroppedAreaPixels(croppedAreaPixels)

    }
    let cropImage = async () => {

    }
    return (

        <div>
            <DialogContent dividers
                sx={{
                    backgroud: "#333",
                    position: 'relative',
                    height: 400,
                    width: "auto",
                    minWidth: { sm: 500 }
                }}
            >
                <Cropper
                    image={myImage}
                    crop={crop}
                    zoom={zoom}
                    rotation={rotation}
                    aspect={16 / 9}
                    onZoomChange={setZoom}
                    onRotationChange={setRotation}
                    onCropChange={setCrop}
                    onCropComplete={cropComplete}
                />
            </DialogContent>
            <DialogActions sx={{ flexDirection: "column", mx: 3, my: 2 }}>
                <Box sx={{
                    display: 'flex',
                    gap: 2,
                    flexWrap: "wrap"
                }}>
                    <Button
                        variant="outlined"
                        startIcon={<Cancel />}
                        onClick={() => setOpenCrop('d-none')}
                    >
                        Cancel
                    </Button>

                    <Button
                        variant="contained"
                        startIcon={<CropIcon />}
                        onClick={cropImage}
                    >
                        Crop
                    </Button>
                </Box>
            </DialogActions>
        </div>
    )
}

我的问题是我不确定如何将其连接到我的输入，以便选择图像并弹出裁剪，然后我裁剪图像，然后是保留在表格的输入字段中，准备与裁剪图像一起提交。输入看起来像＆lt; input type ='file'c​​actect =“ image/*” onChange = {（e）=＆gt; imageHandler（e）}名称=“ Image-1” /＆gt; < /code> 使用该功能：

let imageHandler = (e) => {
        if (e.target.files && e.target.files.length >0) {//chekck if the file is empty 
            let file = e.target.files[0]
            let reader = new FileReader()
            reader.readAsDataURL(file)
            reader.addEventListener("load", ()=>{
                //setFile(reader.result)
                setPhotoURL(reader.result)
            })
            console.log("image loaded")
            setOpenCrop('d-block')
        }
    }

表格是父组件，而农作物组件是我知道不是最佳方法的子组件。我只是不知道如何正确连接它。到现在为止原因。我希望一些指导，因为我知道我的方法可能无法正常工作。太感谢了。