Fluent UI React Northstar Dropdown多选同表头值项异常问题咨询

问题原因 #

Fluent UI Northstar的Dropdown组件在多选模式下，默认会把选项的header（显示的表头文本）作为选中项的唯一识别依据。当多个选项的header完全相同时，组件无法区分这些选项——选中其中一个后，其他同header的选项会被组件判定为已选中状态，或者无法触发选中操作，最终导致只能选其中一项。

解决方案 #

给每个选项添加唯一的value属性，让组件通过这个唯一标识来区分选项，而不是依赖重复的header文本。具体步骤如下：

1. 修改选项数据结构：给每个选项分配一个唯一的value（比如用户ID、UUID等），即使header相同，value也不能重复：

const userOptions = [
  { 
    header: 'Robert Tolbert', 
    content: 'robert.tolbert@example.com', 
    value: 'user_001' 
  },
  { 
    header: 'Robert Tolbert', 
    content: 'robert.tolbert@company.com', 
    value: 'user_002' 
  },
  { 
    header: 'Robert Tolbert', 
    content: 'robert.tolbert@org.com', 
    value: 'user_003' 
  },
  // 其他选项...
];

2. 调整Dropdown的选中状态逻辑：让selected状态存储的是选项的value数组，而非header文本，onChange事件也基于value来更新选中状态：

import { useState } from 'react';
import { Dropdown } from '@fluentui/react-northstar';

function MultiSelectDropdown() {
  const [selectedValues, setSelectedValues] = useState([]);

  return (
    <Dropdown
      multiple
      selected={selectedValues}
      onChange={(e, data) => setSelectedValues(data.selected)}
      options={userOptions}
      placeholder="Select users..."
      searchable
    />
  );
}

这样修改后，组件会以value作为选项的唯一标识，即使多个选项的header完全相同，也能独立选中或取消选中，不会再出现只能选一项的问题。

内容的提问来源于stack exchange，提问作者DevÁsith