Блог

Я пытаюсь повернуть элемент после смены телефона на show. F.e при нажатии на Iphone 12 Pro Max (PhoneBox) появится окно с подробной информацией об этом, и я хочу повернуть это поле (DescDetails). Я пытался сделать это в функции rotateBox с помощью gettind e.target.style, но событие не определено, хотя функция работает (я вижу это по console.log(привет)). Итак, мой вопрос, почему событие не определено и как я могу это исправить?

Корпия для стакблитца: 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>
      </>
    ));
 

Итак, мой вопрос, почему событие не определено и как я могу это исправить?

из-за

<DescDetails onClick={rotateBox()}>

это присвоит возвращаемое значение rotateBox (которое не определено, поскольку функция ничего не возвращает) onClick . Таким образом, исправление должно быть таким простым, как

<DescDetails onClick={rotateBox}>