Nextjs弹窗onclick首次需双击生效问题求助

问题描述 #

开发个人网站弹窗功能时，通过点击按钮触发弹窗显示/隐藏，逻辑为获取弹窗元素ID后判断其display属性是否为none，以此切换block或none。功能整体正常，但首次点击按钮时需双击才生效，后续点击操作正常。

问题原因 #

页面加载完成后，弹窗的display样式是通过CSS类.pokepopbox设置的，而非内联style.display属性。此时pokepop.style.display的初始值为空字符串，第一次点击时pokepop.style.display == "none"判断不成立，代码会执行else分支将display设为none（相当于重复隐藏已隐藏的元素），第二次点击时才会切换为block，导致首次操作需要双击。

解决方案 #

方案1：获取计算样式判断（修改DOM操作逻辑）

通过window.getComputedStyle获取元素实际生效的样式，而非仅读取内联style属性：

let pokepop = () => {
    let pokepop = document.getElementById("pokepopboxid");
    const actualDisplay = window.getComputedStyle(pokepop).display;
    if (actualDisplay === "none") {
        pokepop.style.display = "block";
    } else {
        pokepop.style.display = "none";
    }
}

方案2：使用React状态管理（推荐，符合Next.js开发规范）

避免直接操作DOM，用React的useState状态控制弹窗显示，更符合组件化开发理念：

import { useState } from 'react';

export default function Header() {
    // 用状态控制弹窗显示状态
    const [isPokepopVisible, setIsPokepopVisible] = useState(false);

    const togglePokepop = () => {
        // 切换状态
        setIsPokepopVisible(prevState => !prevState);
    };

    return (
        <>
            <div className={styles.header}>
                <h1 className={styles.logo}>
                    <Link href="/"><a>
                        <Image
                            src={logo}
                            alt="作者头像"
                            className={styles.logo}
                            width={80}
                            height={80}
                        />
                    </a></Link>
                </h1>
                <div className={styles.mainMenu}>
                    <Link href="/projects"><a>Projects</a></Link>
                    <Link href="/about"><a>About</a></Link>
                    <Link href="/blog"><a>Blog</a></Link>
                    <Link href="/">
                        <a onClick={togglePokepop}>
                            <Image
                                src={pokeball}
                                alt="精灵球"
                                className={styles.pokeball}
                                width={40}
                                height={40}
                            />
                        </a>
                    </Link>
                </div>
                {/* 根据状态设置display */}
                <div 
                    id="pokepopboxid" 
                    className="pokepopbox"
                    style={{ display: isPokepopVisible ? 'block' : 'none' }}
                >
                    <h2>My Pokemon</h2>
                </div>
            </div>
        </>
    )
}

说明 #

方案2是更推荐的做法，因为React/Next.js的核心是状态驱动UI，通过状态控制显示隐藏可以避免直接操作DOM带来的潜在问题，代码也更易维护。

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