Reactjs 使用css transform rotate时刷新CardMedia纵横比

我有一个图像上传表单，在CardMedia组件中显示上传的图像，然后您可以使用css transform rotate旋转图像（初始旋转将在服务器上进行）。尽管在渲染图像时CardMedia会做出响应，但旋转时纵横比不会调整。结果是，当图像旋转90°时，图像不适合卡介质

当我按下旋转按钮以校正CardMedia纵横比时，您知道如何刷新CardMedia组件吗

我附上了一个小演示显示这一点

import React，{useState}来自“React”；
从“@material ui/core/styles”导入{makeStyles，createStyles，Theme}”；
从“@物料界面/核心/按钮”导入按钮；
进口{
卡片
行动区，
CardMedia，
卡片行动，
网格
}来自“@材料界面/核心”；
const useStyles=makeStyles（（主题：主题）=>
创建样式({
根目录：{
"& > *": {
页边空白：主题。间距（1）
}
},
输入：{
显示：“无”
}
})
);
导出默认函数UploadButtons（）{
const classes=useStyles（）；
const[image，setImage]=useState（“”）；
const[rotation，setRotation]=useState（0）；
const handleUploadClick=（e:React.ChangeEvent）=>{
const imageUrl=URL.createObjectURL（e.target.files[0]）；
setImage（imageUrl）；
};
常量句柄旋转=（）=>{
设newValue=rotation+90>=360？0：rotation+90；
设置旋转（新值）；
};
返回(
{图像(
) : (
)}
{
如果（e.target.files！==null）{
手摇按钮（e）；
}
}}
/>
上传
{图像&&(
HandlerRotation（）}
>
旋转
)}
);
}

上载除占位符图像外具有不同纵横比的任何图像

按下“旋转”按钮

提前谢谢

import React, { useState } from "react";
import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import {
  Card,
  CardActionArea,
  CardMedia,
  CardActions,
  Grid
} from "@material-ui/core";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      "& > *": {
        margin: theme.spacing(1)
      }
    },
    input: {
      display: "none"
    }
  })
);

export default function UploadButtons() {
  const classes = useStyles();
  const [image, setImage] = useState("");
  const [rotation, setRotation] = useState(0);

  const handleUploadClick = (e: React.ChangeEvent<HTMLInputElement>) => {
    const imageUrl = URL.createObjectURL(e.target.files[0]);
    setImage(imageUrl);
  };

  const handleRotation = () => {
    let newValue = rotation + 90 >= 360 ? 0 : rotation + 90;
    setRotation(newValue);
  };

  return (
    <Grid container className={classes.root} spacing={2}>
      <Grid item xs={12}>
        <Grid container justify="center" spacing={2} >
          <Grid>
            <Card className={classes.root}>
              <CardActionArea>
                {image ? (
                  <CardMedia
                    component="img"
                    image={image}
                    style={{ transform: `rotate(${rotation}deg)` }}
                  />
                ) : (
                  <CardMedia
                    component="img"
                    alt="Contemplative Reptile"
                    image="https://via.placeholder.com/300"
                    title="placeholder image"
                  />
                )}
              </CardActionArea>
              <CardActions>
                <input
                  accept="image/*"
                  className={classes.input}
                  id="contained-button-file"
                  multiple
                  type="file"
                  onChange={e => {
                    if (e.target.files !== null) {
                      handleUploadClick(e);
                    }
                  }}
                />
                <label htmlFor="contained-button-file">
                  <Button variant="contained" color="primary" component="span">
                    Upload
                  </Button>
                </label>
                {image && (
                  <Button
                    variant="contained"
                    color="secondary"
                    onClick={() => handleRotation()}
                  >
                    Rotate
                  </Button>
                )}
              </CardActions>
            </Card>
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );
}