时间戳

首页 > 解决方案 > Javascript React 图像玻璃放大镜

javascript - Javascript React 图像玻璃放大镜

问题描述

我有这个玻璃放大镜（来自https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_magnifier_glass），它在我的反应项目中打开很好 onClick ，但我想让它打开/关闭进一步的点击，但它没有关闭。

这是我应该实现的功能，但是无论我的 zoomActive 状态设置为 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 函数：

 <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;
}

标签： javascriptreactjsreact-hookstogglemagnify

解决方案

以防万一它对任何人都有帮助，删除课程对我有用。像这样：

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

不确定这是否是最好的方法，但它有效。

推荐阅读