在 React 中将元素旋转 e.target.style

Question

我试图在更改 phone 后旋转元素以显示。 F.e 单击 Iphone 12 Pro Max (PhoneBox) 时将显示包含其详细信息的框，我想旋转此框 (DescDetails)。我试图通过 gettind e.target.style 在函数 rotateBox 中执行此操作，但事件未定义，尽管该函数正在运行（我通过 console.log(hello) 看到它）。所以我的问题是为什么事件未定义，我该如何解决？

stackblitz 的 Lint：https://stackblitz.com/edit/react-epnmz9?file=src/App.js

代码：

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>
      </>
    ));

Answer 1

So my question why event is undefinded and how can I fix that?

因为

<DescDetails onClick={rotateBox()}>

这会将 rotateBox 的返回值（未定义，因为该函数未返回任何内容）分配给 onClick。所以修复应该像

一样简单

<DescDetails onClick={rotateBox}>

在 React 中将元素旋转 e.target.style

Rotate element by e.target.style in React

javascript

rotation

event-handling

reactjs