在 Material UI 多选中添加全选并在选择选项中显示值

Question

我是 Material UI 的新手，正在尝试在材质多选中集成一个全选选项。 我有一个对象数组

const names = [
{ id: 0, name: "Oliver Hansen" },
{ id: 1, name: "Van Henry" },
{ id: 2, name: "April Tucker" }
];

我正在遍历这个数组并在多选中显示该值。 下面是多选的代码

 <FormControl className={classes.formControl}>
    <InputLabel id="demo-mutiple-checkbox-label">Tag</InputLabel>
    <Select
      labelId="demo-mutiple-checkbox-label"
      id="demo-mutiple-checkbox"
      multiple
      value={personName}
      onChange={handleChange}
      input={<Input />}
      renderValue={(selected) => selected.join(", ")}
      MenuProps={MenuProps}
    >
      <MenuItem
        value="all"
        classes={{
          root: isAllSelected ? classes.selectedAll : ""
        }}
      >
        <ListItemIcon>
          <Checkbox
            classes={{ indeterminate: classes.indeterminateColor }}
            checked={isAllSelected}
            indeterminate={
              personName.length > 0 && personName.length < names.length
            }
          />
        </ListItemIcon>
        <ListItemText
          classes={{ primary: classes.selectAllText }}
          primary="Select All"
        />
      </MenuItem>
      {names.map((item, index) => (
        <MenuItem key={item.id} value={item.id}>
          <Checkbox checked={personName.indexOf(item.id) > -1} />
          <ListItemText primary={item.name} />
        </MenuItem>
      ))}
    </Select>
  </FormControl>

在选择选项中，我将值作为 id 和文本作为名称，但是当我选择任何选项时，它会显示值而不是名称。

这在某种意义上是正确的，但我只想在选择字段中显示名称，而不是我与值关联的 id。

selectAll 也作为一个单独的选项而不是选择所有值。

Here is the sandbox link

Answer 1

如果你有 id，你可以找到属于它的对象，然后只使用名称。

renderValue={
    (selected) => 
        names.filter( name => selected.includes(name.id) )
            .map( record => record.name )
            .join(", ")
}