React项目中导航栏主题切换器与简历按钮无法点击求助

核心问题分析 #

1. 主题切换器状态混乱 #

同时维护mode和checked两个独立状态，且checkbox的onChange仅更新checked不关联mode，加上div的onClick单独触发切换逻辑，导致状态不同步、点击事件冲突，切换器无法正常响应。

2. 简历下载按钮结构错误 #

HTML规范中<button>不能嵌套<a>标签，这种无效结构会被浏览器错误解析，导致点击事件被拦截，按钮无法触发下载。

修复后的代码 #

function App() {
  const style =
    "block max-w-sm p-6 bg-white-50 border border-gray-300 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 w-50 sm:w-50";

  const [mode, setMode] = useState("light");

  // 合并主题切换逻辑，直接通过checkbox的change事件更新mode
  const toggleDarkMode = () => {
    setMode(prevMode => prevMode === "light" ? "dark" : "light");
  };

  return (
    <div className={mode === "dark" ? "dark" : ""}>
      <ScrollContainer>
        <section className="h-screen w-screen bg-orange-50 dark:bg-gray-900">
          <nav className="p-8 mb-12 flex justify-between  sm:text-left">
            <h1 className="text-xl space-x-5 dark:text-white">
              Developed by, <span className=" text-teal-500">__RSD</span>
            </h1>
            <ul className="flex items-center dark:text-white space-x-5">
              <label className="inline-flex relative items-center mr-5 cursor-pointer">
                <input
                  type="checkbox"
                  checked={mode === "dark"}
                  className="sr-only peer"
                  onChange={toggleDarkMode} // 直接绑定切换逻辑到checkbox的change事件
                />
                <div
                  className="w-11 h-6 bg-gray-200 rounded-full peer  peer-focus:ring-green-300  peer-checked:after:translate-x-full
                   peer-checked:after:border-white after:content-[''] after:absolute
                    after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border 
                   after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-gray-600"
                ></div>
                <span className="ml-2 text-sm font-medium dark:text-white text-black">
                  Dark
                </span>
              </label>

              <li>
                {/* 移除无效的button嵌套，直接用a标签，添加cursor-pointer确保hover光标变化 */}
                <a
                  href="/assets/RajuSharma.pdf"
                  download
                  className=" bg-teal-500 hover:bg-teal-700 text-white hover:text-white font-bold py-2 px-4 rounded cursor-pointer"
                >
                  Resume
                </a>
              </li>
            </ul>
          </nav>
          {/* 其余代码保持不变 */}
          <div className="p-5 text-center text-black dark:text-white">
            <motion.h2
              className="font-mono font-bold mt-52 text-5xl tracking-widest "
              initial={{ x: "100%" }}
              animate={{ x: "0%" }}
              transition={{ duration: 1 }}
            >
              RAJU SHARMA DAHAL
            </motion.h2>
            <motion.h3
              className="font-mono font-semibold text-3xl tracking-widest"
              initial={{ x: "-100%" }}
              animate={{ x: "0%" }}
              transition={{ duration: 1.5 }}
            >
              <span className=" text-teal-500">WEB</span> DEVELOPER
            </motion.h3>
            <div className="flex justify-center">
              <p className="font-serif pt-4 text-black text-center leading-3f w-2/4 dark:text-white">
                As a front-end developer, I am passionate about creating
                visually appealing and user-friendly websites. I have experience
                in HTML, CSS, and JavaScript and I enjoy using these skills to
                bring designs to life.
              </p>
            </div>
          </div>
          <div className="text-center text-3xl font-bold"></div>
          <div className="flex text-xl tracking-wide justify-center gap-6 pt-5">
            <a
              className="text-black dark:text-white"
              href="https://github.com/razzuSharma"
            >
              <BsGithub />
            </a>
            <a
              className="text-black dark:text-white"
              href="https://www.linkedin.com/in/raju-sharma-6a30671b0/"
            >
              <BsLinkedin />
            </a>
            <a
              className="text-black dark:text-white"
              href="https://www.facebook.com/ribekon/"
            >
              <BsFacebook />
            </a>
          </div>
        </section>
        <section className="h-screen w-screen  bg-orange-50  dark:bg-gray-900">
          <ScrollPage>
            <Skills />
            <section className=" dark:bg-gray-900">
              <Projects />
            </section>
          </ScrollPage>
        </section>
        <section className="bg-orange-50  dark:bg-gray-900">
          <Contact />
        </section>
      </ScrollContainer>
      <ToastContainer />
    </div>
  );
}
export default App;

关键修改点 #

• 主题切换器：删除冗余的checked状态和handleCheck函数，将toggleDarkMode直接绑定到checkbox的onChange事件，确保状态唯一且同步；移除div上的onClick，避免事件冲突。
• 简历按钮：移除外层无效的<button>标签，直接保留<a>标签，并添加cursor-pointer类，确保hover时光标变为指针样式。

内容的提问来源于stack exchange，提问作者Raju Sharma Dahal