React下拉菜单点击切换选中选项样式时所有元素被修改问题求助

• 状态定义错误：你当前用布尔类型的optionStyle存储选中状态，所有下拉选项共用这一个布尔值判断类名，只要状态为真，所有选项都会触发colored类，自然会出现点击一个所有选项都变色的问题。
• 类名判断逻辑无区分度：没有和当前遍历的单个选项ID绑定，无法识别哪个选项是被点击的目标。

1. 把状态改为存储当前选中的选项ID，而非布尔值
2. 类名判断改为「当前遍历的选项ID和存储的选中ID相等」时才激活选中样式
3. 可对齐你原有默认选中逻辑，同步初始选中状态

修复后代码示例：

// 状态改为存储选中项ID，初始值可设为-1代表无选中，也可同步默认选中值
const [selectedOptionId, setSelectedOptionId] = useState<number>(-1);

const onOptionClickHandler = (action: any, optionId: number) => {
  // 点击时先更新选中状态
  setSelectedOptionId(optionId);
  action();
  close();
};

const getActiveElement = () => {
  const element = selectedIndex.length > 1 ? getActiveOption(list, 0) : null;
  const active = element ? element.id : -1;

  return selectedIndex.length > 1
    ? active
    : list[activeElement]
      ? list[activeElement].id
      : -1;
};

// 如果需要同步默认选中状态，可加useEffect在组件初始化/菜单打开时执行
// useEffect(() => {
//   setSelectedOptionId(getActiveElement())
// }, [])

{list.map((options: any) => (
  <div 
    onClick={() => onOptionClickHandler(options.action, options.id)} 
    // 仅当前选项ID和选中ID匹配时，才用选中样式
    className={options.id === selectedOptionId ? 'colored' : 'not_colored'}
    key={options.id}
  >
      <DropdownOptions
        option={options}
        onOptionClick={onOptionClickHandler}
        activeId={getActiveElement()}
    />
  </div>
))}

• 点击新选项时，selectedOptionId会更新为新的选项ID，旧ID对应的选项自动匹配到not_colored类，无需手动重置上一个选中项的样式。
• 你原有getActiveElement的默认选中逻辑可通过useEffect和选中状态同步，保证初始加载时默认选中项也能正常展示选中样式。
• 可进一步优化类型定义，把options的any类型替换为你项目中定义的选项类型，提升类型安全性。

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