在 MUI 多选下拉列表的 renderValue 中显示选项的名称而不是 ID

Question

我正在使用 MUI 多选下拉菜单，并且正在努力获取

renderValue

来填充以逗号分隔的所选选项名称列表。 MUI 网站的示例最终显示了以逗号分隔的选项 ID 列表，因为它似乎使用

value

作为

renderValue

的基础。

最简单的方法是将

value={option.id}

更改为

value={option.name}

，但这会导致问题，因为我需要使用 ID 作为值，以便我可以将其写回数据库，而不是名称。

我尝试编写函数来将

selected

与选项数组进行比较，并获取 ID 与

selected

之一匹配的对象的名称，但无法让它工作，特别是因为我似乎无法访问

selected

属性之外的

renderValue

。有人可以告诉我如何在

renderValue

中显示姓名而不是 ID 吗？

这是我的选择示例：

[
  {
   "id": 1,
   "name": "Option-1"
  },
  {
   "id": 2,
   "name": "Option-2"
  },
    {
   "id": 3,
   "name": "Option-3"
  }
 ]

目前，当下拉列表关闭时，

renderValue

显示

1, 2, 3

，但我想显示

Option-1, Option-2, Option-3

，因为ID对用户没有意义。

这是我的组件：

import * as React from 'react';
import axios from 'axios';
import { Checkbox, FormControl, FormHelperText, InputLabel, Select, MenuItem, ListItemText, OutlinedInput } from '@material-ui/core';

export default function dropdownMultiSelect(props) {
  const { label, name, onChange, prompt, value, url } = props;
  const [options, setOptions] = React.useState([]); // populated by Axios call

  return (
      <FormControl >
        <InputLabel>{label}</InputLabel>
        <Select
          multiple
          name={name}
          value={(value === undefined || value === null || options.length === 0) ? '' : value} 
          onChange={onChange}
          renderValue={(selected) => selected.join(', ')} 
        >
          {options.map((option) => (
            <MenuItem 
              key={option.id}
              value={option.id}
            >
            <Checkbox 
              checked={value.includes(option.id)}
            />
            {option.name}
            </MenuItem>
          ))}
        </Select> 
      </FormControl>
  );
}

这是我的变更处理程序

  const [values, setValues] = React.useState({} as any);

  const handleInputChange = e => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value
    });
    if (validateOnChange) { validate({ [name]: value }); }
  };

Answer 1

已经找到解决方案，所以我想与其他人分享，这样就不必像我一样花那么多时间寻找解决方案。

这是来自 MUI 网站的示例。这将使用您的

MenuItem

的值显示一个以逗号分隔的列表，在上面的示例中，它将是指定为

option.id

 的 

value={option.id}

renderValue={(selected) => selected.join(', ')} 

我需要将 ID 作为我的值而不是名称传递回来，因此为了能够使用 value 属性中指定的内容以外的内容，需要创建一个过滤器并通过填充下拉列表的选项数组进行映射获取名称。

这将允许您使用

option.name

而不是

option.id

的值

renderValue={(selected) => {
    const selectedOption = options.filter((option) => 
    selected.includes(option.id)).map((option) => option.name);
    return selectedOption.join(', '); }
}
```