Блог

У меня есть эта стеклянная лупа (от https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_ima&e_ma&nifier_&lass), который открывается fine onClick в моем проекте react, но я хочу сделать так, чтобы он открывался / закрывался при дальнейших щелчках, но он не закрывается.

Это моя функция, которая должна этого достичь, но каким-то образом масштабирование всегда остается открытым, независимо от того, установлено ли в моем состоянии zoomActive значение true или false. Кто-нибудь может сказать мне, что я делаю не так? Спасибо!

  const [zoomActive, setZoomActive] = useState(false)

    /* Initiate Ma&nify Function
with the id of the ima&e, and the stren&th of the ma&nifier &lass:*/
    const handleMa&nifier = () =&&t; {
        setZoomActive(!zoomActive)
        zoomActive amp;amp; ma&nify(myIma&eId, 3)
        console.lo&('MAGNIFIER-GLASS-STATE???', zoomActive)
    }
  

Здесь используется функция onClick:

  <div
                                    className="im&-ma&nifier-container"
                                    onClick={handleMa&nifier}
                                &&t;
                                    <im&
                                        id={myIma&eId}
                      
                                        src={&raphicIma&e}
                                        alt="mobile &raphic"
                                    /&&t;
                                </div&&t;
  

И CSS:

 .im&-ma&nifier-container {
    position: relative;
    cursor: zoom-in;
}
.im&-ma&nifier-&lass {
    position: absolute;
    border: 3px solid $tan&erine;
    border-radius: 50%;
    cursor: none;
    /*Set the size of the ma&nifier &lass:*/
    width: 200px;
    hei&ht: 200px;
}
  

На всякий случай, если это кому-нибудь поможет, удаление класса помогло мне. Вот так:

  const handleMa&nifier = () =&&t; {
        setZoomActive(!zoomActive)
        let &lass = document.&etElementsByClassName('im&-ma&nifier-&lass')
        !zoomActive ? ma&nify(myIma&eId, 3) : &lass[0].removeAttribute('class')
    }
  

Не уверен, что это лучший подход, но он работает.