React下拉菜单点击分类后不消失的问题及解决咨询

你的问题核心是用单个状态同时承担了菜单显隐和选中文本存储两个功能，导致逻辑冲突。比如初始open是空字符串，点击展开时setOpen(!open)会把它变成true（空字符串取反为布尔值true），之后选中选项时设置文本或false，菜单判断{open ? ...}的逻辑就彻底混乱了。

修正方案：拆分状态，明确职责 #

把原来的open拆成两个独立状态：

• isMenuOpen：布尔值，专门控制菜单的展开/收起
• selectedService：字符串，存储用户选中的服务文本

同时把重复的选项点击函数合并，不用每个选项写单独的处理函数，直接通过参数传递选中的文本，减少冗余代码。

修正后的完整代码 #

import React, { useState } from "react";
import "../styles/Dropdown.css";

const Dropdown = () => {
  // 控制菜单是否展开
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  // 存储选中的服务文本
  const [selectedService, setSelectedService] = useState("");

  // 切换菜单展开/收起状态
  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  // 处理选项点击：设置选中文本 + 关闭菜单
  const handleServiceSelect = (service) => {
    setSelectedService(service);
    setIsMenuOpen(false);
  };

  return (
    <section className="dropdown_container">
      <div className="Search">
        Vælg Service
        <button className="Search_Input" onClick={toggleMenu}>
          {/* 有选中文本显示文本，否则显示默认提示 */}
          {selectedService || "Vælg en service"}
        </button>
        {/* 用isMenuOpen判断菜单是否显示 */}
        {isMenuOpen ? (
          <ul className="menu">
            <li className="menu-item">
              <button onClick={() => handleServiceSelect("Dame Klip")}>Dame Klip</button>
            </li>
            <li className="menu-item">
              <button onClick={() => handleServiceSelect("Herre Klip")}>Herre Klip</button>
            </li>
            <li className="menu-item">
              <button onClick={() => handleServiceSelect("Farvning")}>Farvning</button>
            </li>
            <li className="menu-item">
              <button onClick={() => handleServiceSelect("Permanent")}>Permanent</button>
            </li>
            <li className="menu-item">
              <button onClick={() => handleServiceSelect("Hår opsætning")}>Hår opsætning</button>
            </li>
          </ul>
        ) : null}
        {isMenuOpen ? <div>Is Open</div> : <div></div>}
      </div>
    </section>
  );
};

export default Dropdown;

关键改动说明 #

1. 状态拆分：两个状态各司其职，isMenuOpen只负责菜单显隐，selectedService只负责存储选中内容，彻底避免状态冲突。
2. 合并处理函数：handleServiceSelect接收服务名称参数，一次完成“设置选中文本”和“关闭菜单”两个操作，代码更简洁。
3. 按钮文本优化：默认显示提示文本，选中后显示对应服务，用户体验更友好。
4. 菜单显隐判断：统一用isMenuOpen布尔值判断，逻辑清晰，不会再出现字符串/布尔值混合判断的问题。

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