按钮需点击两次才执行缩进if块代码的问题如何解决？

问题核心原因 #

• 字符串未加引号：代码中的productive作为类名和元素ID的字符串值，没有用引号包裹，会被JS识别为未定义变量，导致条件判断失效
• 行内样式判断不可靠：element.style.display只能读取元素行内设置的样式属性，如果元素初始的display值是通过外部CSS类设置的，第一次读取时返回值为空字符串，无法匹配"block"的判断条件，因此第一次点击只会给元素添加行内display:block属性，第二次点击才会匹配判断条件执行隐藏逻辑，这是触发两次点击的核心原因
• React环境指向异常：你贴的绑定代码是React的JSX语法，普通方法未绑定this的情况下，触发事件时this指向会出错，也可能导致逻辑执行异常

修复代码 #

逻辑层修正 #

// 改用箭头函数定义避免this指向问题（React环境适用）
filter = (e) => {
    const targetFlag = 'productive';
    const controlEl = document.getElementById(targetFlag);
    // 先判断目标元素是否存在，避免空值报错
    if (!controlEl || !e.target.classList.contains(targetFlag)) return;
    // 用getComputedStyle读取元素实际渲染的display值，覆盖初始非行内样式的场景
    const isVisible = window.getComputedStyle(controlEl).display === 'block';
    if (isVisible) {
        controlEl.style.display = 'none';
        e.target.classList.add('selected');
    } else {
        controlEl.style.display = 'block';
        e.target.classList.remove('selected');
    }
}

绑定层修正 #

<div id="filter_">
  <a className={main_class} style={pillStyle} onClick={this.filter}>{this.props.filter}</a>
</div>

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