Javascript 在React中按e.target.style旋转元素

我试图在更换手机后旋转元素以显示。F.e单击Iphone 12 Pro Max（PhoneBox）时，将显示包含详细信息的框，我想旋转此框（DescDetails）。我试图通过getind e.target.style在函数rotateBox中实现这一点，但尽管函数正在工作，但事件是未定义的（我通过console.log（hello）看到它）。所以我的问题是，为什么事件是未定义的，我如何修复它

林特到斯塔克闪电战：

代码：

函数PhonesSection（）{
const[showPhoneSeries，setShowPhoneSeries]=useState（“苹果”）；
const[activePhoneSeries，setActivePhoneSeries]=useState（“”）；
const[showPhoneModel，setShowPhoneModel]=useState（）；
const handleShowPhoneSeries=e=>{
让seriesName=e.target.textContent；
setShowPhoneSeries（seriesName）；
};
常数rotateBox=e=>{
console.log（“你好”）；
控制台日志（e）；
//e.target.className.add（'rotate'）；
//e.target.style.transform='rotateY（360度）'；
//e.target.style.transition='所有0.3英寸宽'；
};
const handleShowPhoneModel=model=>{
设置ShowPhone模型（模型）；
//旋转箱（型号）
};
const showbox=电话
.filter（phone=>phone.series===showPhoneSeries）
.map（（电话，索引）=>(
handleShowPhoneModel（phone.model）}>
{phone.model}
));
const showPhoneModelBox=电话
.filter（phone=>phone.model===showPhoneModel）
.map（（电话，索引）=>(
{phone.model}
猛撞：
{phone.ram}
存储：
{phone.storage}
摄像机：
{phone.camera}
尺寸：
{phone.size}
电池：
{电话。电池}
价格：
{phone.price}
去商店
));

所以我的问题是，为什么事件是未定义的，我如何修复它

因为

这将把

rotateBox

的返回值（由于函数不返回任何内容，因此未定义）分配给

onClick

。因此，解决方法应该尽可能简单

所以我的问题是，为什么事件是未定义的，我如何修复它

因为

这将把

rotateBox

的返回值（由于函数不返回任何内容，因此未定义）分配给

onClick

。因此，解决方法应该尽可能简单

---

多么明显的错误啊。。我没看见。谢谢啊，这是多么明显的错误啊。。我没看见。谢谢

function PhonesSection() {
  const [showPhoneSeries, setShowPhoneSeries] = useState("Apple");
  const [activePhoneSeries, setActivePhoneSeries] = useState("");
  const [showPhoneModel, setShowPhoneModel] = useState();

  const handleShowPhoneSeries = e => {
    let seriesName = e.target.textContent;
    setShowPhoneSeries(seriesName);

  };
  const rotateBox = e => {
    console.log("hello");
    console.log(e);
    // e.target.className.add('rotate');
    // e.target.style.transform = 'rotateY(360deg)';
    // e.target.style.transition = 'all 0.3s ease-in';
  };

  const handleShowPhoneModel = model => {
    setShowPhoneModel(model);
    //rotateBox(model)
  };

  const showBoxes = phones
    .filter(phone => phone.series === showPhoneSeries)
    .map((phone, index) => (
      <PhoneBox key={index} onClick={() => handleShowPhoneModel(phone.model)}>
        <PhoneImage src={phone.img} />

        <PhoneName>{phone.model}</PhoneName>
      </PhoneBox>
    ));

  const showPhoneModelBox = phones
    .filter(phone => phone.model === showPhoneModel)
    .map((phone, index) => (
      <>
        <DescImage src={phone.img} />
        <DescDetails onClick={rotateBox()}>
          <DescPhoneName>{phone.model}</DescPhoneName>
          <Table>
            <Tr>
              <Td>RAM:</Td>
              <Td>{phone.ram}</Td>
            </Tr>

            <Tr>
              <Td>Storage:</Td>
              <Td>{phone.storage}</Td>
            </Tr>
            <Tr>
              <Td>Camera:</Td>
              <Td>{phone.camera}</Td>
            </Tr>
            <Tr>
              <Td>Size:</Td>
              <Td>{phone.size}</Td>
            </Tr>
            <Tr>
              <Td>Battery:</Td>
              <Td>{phone.battery}</Td>
            </Tr>
            <Tr>
              <Td>Price:</Td>
              <Td>{phone.price}</Td>
            </Tr>
          </Table>
          <Button>Go to store</Button>
        </DescDetails>
      </>
    ));