Javascript React 圖像玻璃放大鏡

Question

我有這個玻璃放大鏡（來自https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_magnifier_glass ），它在我的 react/close 項目中打開了很好的 onClick，但我想讓它打開進一步的點擊，但它沒有關閉。

這是我的 function 應該可以實現這一點，但是無論我的 zoomActive state 設置為 true 還是 false，縮放始終保持打開狀態。 誰能告訴我我做錯了什么？ 謝謝！

 const [zoomActive, setZoomActive] = useState(false)

    /* Initiate Magnify Function
with the id of the image, and the strength of the magnifier glass:*/
    const handleMagnifier = () => {
        setZoomActive(!zoomActive)
        zoomActive && magnify(myImageId, 3)
        console.log('MAGNIFIER-GLASS-STATE???', zoomActive)
    }

這里是 onClick function：

 <div
                                    className="img-magnifier-container"
                                    onClick={handleMagnifier}
                                >
                                    <img
                                        id={myImageId}
                      
                                        src={graphicImage}
                                        alt="mobile graphic"
                                    />
                                </div>

CSS：

.img-magnifier-container {
    position: relative;
    cursor: zoom-in;
}
.img-magnifier-glass {
    position: absolute;
    border: 3px solid $tangerine;
    border-radius: 50%;
    cursor: none;
    /*Set the size of the magnifier glass:*/
    width: 200px;
    height: 200px;
}

Answer 1

以防萬一它對任何人都有幫助，刪除 class 對我有用。 像這樣：

 const handleMagnifier = () => {
        setZoomActive(!zoomActive)
        let glass = document.getElementsByClassName('img-magnifier-glass')
        !zoomActive ? magnify(myImageId, 3) : glass[0].removeAttribute('class')
    }

不確定這是否是最好的方法，但它有效。