React中如何获取Material UI多选下拉选中项的Key/ID？

当前你把MenuItem的value绑定成了name.FullName，所以只能拿到显示名称，要获取选中项的ID/Key，只需要调整value的绑定值，同时更新对应的状态和判断逻辑就行，下面给两种常用方案：

方案一：用ID作为MenuItem的value值 #

这种方式状态里存的是ID数组，数据量小，适合用户数据较多的场景：

1. 把MenuItem的value从name.FullName换成name.id
2. 状态变量改成存ID数组（比如selectedUserIds）
3. 选中判断从判断名称是否存在改成判断ID是否在数组里
4. 用renderValue把ID转换成对应的用户名显示

修改后的完整代码：

export default function MultipleSelectBox() {
  const [selectedUserIds, setSelectedUserIds] = React.useState([]);
  const valueSheet = useContext(ContextSheet);

  const handleChange = (event) => {
    const { target: { value } } = event;
    const selectedIds = typeof value === 'string' ? value.split(',') : value;
    setSelectedUserIds(selectedIds);
    
    // 这里直接拿到选中的ID数组
    console.log("选中的用户ID：", selectedIds);
  };

  // 根据选中ID获取对应的用户名，用于下拉框显示
  const getSelectedNames = () => {
    return selectedUserIds
      .map(id => valueSheet.userFullName.find(user => user.id === id)?.FullName)
      .filter(Boolean)
      .join(', ');
  };

  return (
    <div>
      <FormControl sx={{ m: 1, width: 210 }} size="small">
        <InputLabel id="demo-multiple-checkbox-label">Users</InputLabel>
        <Select
          labelId="demo-multiple-checkbox-label"
          id="demo-multiple-checkbox"
          multiple
          value={selectedUserIds}
          onChange={handleChange}
          input={<OutlinedInput label="Users" />}
          renderValue={() => getSelectedNames()}
          MenuProps={MenuProps}
        >
          {valueSheet.userFullName.map((user) => {
            return (
              <MenuItem key={user.id} value={user.id}>
                <Checkbox checked={selectedUserIds.includes(user.id)} />
                <ListItemText primary={user.FullName} />
              </MenuItem>
            );
          })}
        </Select>
      </FormControl>
    </div>
  );
}

方案二：用整个用户对象作为MenuItem的value值 #

这种方式状态里存的是用户对象，直接能拿到所有信息，不用额外查找，适合需要同时使用ID和名称的场景：

1. 把MenuItem的value换成整个user对象
2. 给Select组件加getOptionSelected属性，用来判断选项是否选中（通过ID匹配）
3. 状态变量改成存用户对象数组（比如selectedUsers）
4. 选中判断改成检查对象ID是否匹配

修改后的完整代码：

export default function MultipleSelectBox() {
  const [selectedUsers, setSelectedUsers] = React.useState([]);
  const valueSheet = useContext(ContextSheet);

  const handleChange = (event) => {
    const { target: { value } } = event;
    const selectedItems = typeof value === 'string' ? JSON.parse(value) : value;
    setSelectedUsers(selectedItems);
    
    // 直接获取选中用户的ID数组
    const selectedIds = selectedItems.map(user => user.id);
    console.log("选中的用户ID：", selectedIds);
    // 同时也能拿到显示名称
    const selectedNames = selectedItems.map(user => user.FullName);
    console.log("选中的用户名称：", selectedNames);
  };

  return (
    <div>
      <FormControl sx={{ m: 1, width: 210 }} size="small">
        <InputLabel id="demo-multiple-checkbox-label">Users</InputLabel>
        <Select
          labelId="demo-multiple-checkbox-label"
          id="demo-multiple-checkbox"
          multiple
          value={selectedUsers}
          onChange={handleChange}
          input={<OutlinedInput label="Users" />}
          renderValue={(selected) => selected.map(user => user.FullName).join(', ')}
          // 必须设置这个属性，通过ID判断选项是否选中
          getOptionSelected={(option, value) => option.id === value.id}
          MenuProps={MenuProps}
        >
          {valueSheet.userFullName.map((user) => {
            return (
              <MenuItem key={user.id} value={user}>
                <Checkbox checked={selectedUsers.some(item => item.id === user.id)} />
                <ListItemText primary={user.FullName} />
              </MenuItem>
            );
          })}
        </Select>
      </FormControl>
    </div>
  );
}

两种方案各有优劣：

• 方案一：状态存储更轻量，适合用户数据量大的场景，但需要通过ID反向查找用户名。
• 方案二：直接获取选中项的所有信息，无需额外查找，但状态存储的数据量相对大一些。

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