React自定义Dropdown组件无法显示选中项，求添加逻辑指导

要让Dropdown组件显示选中的选项，只需添加状态存储选中值、更新点击逻辑，再把选中值渲染到触发按钮上即可，具体实现步骤如下：

1. 添加选中项状态 #

在组件中新增useState钩子，用来保存当前选中的选项信息：

const [selectedOption, setSelectedOption] = React.useState(null);

可以根据需求设置初始值，比如{ label: "Menu 1", value: "menu1" }，也可以保持null让按钮默认显示"Dropdown"。

2. 更新菜单点击事件 #

修改菜单选项的点击处理函数，点击时将对应选项信息存入状态：

const handleMenuOne = () => {
  setSelectedOption({ label: "Menu 1", value: "menu1" });
  setOpen(false);
};

const handleMenuTwo = () => {
  setSelectedOption({ label: "Menu 2", value: "menu2" });
  setOpen(false);
};

3. 修改触发按钮的显示内容 #

将原来固定的"Dropdown"文本替换为选中项的标签，未选中时显示默认文本：

<button onClick={handleOpen}>
  {selectedOption ? selectedOption.label : "Dropdown"}
</button>

4. 可选：给选中菜单项添加高亮样式 #

如果需要直观标识选中的菜单项，可以在CSS中新增选中状态样式，再在菜单项中判断并添加类：
在CSS文件中新增：

.menu > li.selected {
  background-color: #e0e0e0;
}

然后修改菜单项的li标签：

<li className={`menu-item ${selectedOption?.value === "menu1" ? "selected" : ""}`}>

第二个菜单项做同样处理即可。

修改后的完整代码 #

App.js

import * as React from "react";
import user_circle_black from "./assets/icons/user_circle_black.svg";

import "./App.css";

const App = () => {
  const [open, setOpen] = React.useState(false);
  // 新增选中项状态
  const [selectedOption, setSelectedOption] = React.useState(null);

  const handleOpen = () => {
    setOpen(!open);
  };

  const handleMenuOne = () => {
    setSelectedOption({ label: "Menu 1", value: "menu1" });
    setOpen(false);
  };

  const handleMenuTwo = () => {
    setSelectedOption({ label: "Menu 2", value: "menu2" });
    setOpen(false);
  };

  return (
    <div className="dropdown">
      {/* 显示选中项或默认文本 */}
      <button onClick={handleOpen}>
        {selectedOption ? selectedOption.label : "Dropdown"}
      </button>
      {open ? (
        <ul className="menu">
          {/* 添加选中状态类 */}
          <li className={`menu-item ${selectedOption?.value === "menu1" ? "selected" : ""}`}>
            <button onClick={handleMenuOne} className="dropdown-menu">
              <img src={user_circle_black} alt="user icon" />
              <p>Menu 1</p>
            </button>
          </li>
          <li className={`menu-item ${selectedOption?.value === "menu2" ? "selected" : ""}`}>
            <button onClick={handleMenuTwo} className="dropdown-menu">
              <img src={user_circle_black} alt="user icon" />
              <p>Menu 2</p>
            </button>
          </li>
        </ul>
      ) : null}
    </div>
  );
};

export default App;

App.css

.dropdown {
  position: relative;
}

.dropdown-menu {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.menu {
  position: absolute;

  list-style-type: none;
  margin: 5px 0;
  padding: 0;

  border: 1px solid grey;
  width: 150px;
}

.menu > li {
  margin: 0;

  background-color: white;
}

.menu > li:hover {
  background-color: lightgray;
}

/* 新增选中项样式 */
.menu > li.selected {
  background-color: #e0e0e0;
}

.menu > li > button {
  width: 100%;
  height: 100%;
  text-align: left;

  background: none;
  color: inherit;
  border: none;
  padding: 5px;
  margin: 0;
  font: inherit;
  cursor: pointer;
}

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