React中onClick结合if条件判断仅生效一次的问题咨询

问题描述 #

绑定到DIV容器onClick的点击事件仅能正常触发一次，再次点击时if (element.style.display)条件始终为true，无法进入else分支。代码如下：

function click(event) {
    let element = event.currentTarget.querySelector(".infos__content");
    if (element.style.display) {
        alert("test")
        element.style.display = "none";
    }
    else {
        alert("test1")
        element.style.display = "block";
    }
}

问题根源 #

element.style.display只读取元素的内联样式，不会识别CSS类或外部样式表中的样式。具体流程：

• 初始状态：元素无内联display样式，element.style.display为空字符串，进入else分支，设置为block。
• 第二次点击：element.style.display值为"block"，条件成立，设置为"none"。
• 第三次及之后点击：element.style.display值为"none"，这是一个非空字符串，所以if (element.style.display)始终为true，只会执行alert("test")并重复设置display: none，无法切换回显示状态。

修复方案 #

方案1：使用getComputedStyle获取实际生效样式

通过window.getComputedStyle获取元素最终的计算样式，判断实际显示状态：

function click(event) {
    let element = event.currentTarget.querySelector(".infos__content");
    const actualDisplay = window.getComputedStyle(element).display;
    if (actualDisplay === "block") {
        alert("test")
        element.style.display = "none";
    } else {
        alert("test1")
        element.style.display = "block";
    }
}

方案2：用React状态管理（推荐）

直接操作DOM不符合React的设计模式，建议通过状态控制元素显示：

import { useState } from 'react';

function YourComponent() {
    const [isContentVisible, setIsContentVisible] = useState(false);

    const handleClick = () => {
        setIsContentVisible(prev => !prev);
        isContentVisible ? alert("test") : alert("test1");
    };

    return (
        <div onClick={handleClick}>
            <div 
                className="infos__content" 
                style={{ display: isContentVisible ? "block" : "none" }}
            >
                {/* 你的内容 */}
            </div>
        </div>
    );
}

这种方式依托React的状态更新机制，避免直接操作DOM，更符合组件化开发思路。

内容的提问来源于stack exchange，提问作者Marco