Reactjs 在材质UI multiselect中添加“全选”并在“选择”选项中显示值

我不熟悉材质UI，正在尝试在材质multiselect中集成“全选”选项。 我有一个对象数组

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

我迭代这个数组，并在multiselect中显示值。 下面是Multiselect的代码

 <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>

标签
已选择。加入（“，”}
MenuProps={MenuProps}
>
0&&personName.length
{names.map（（项目，索引）=>(
-1} />
))}

在选择选项中，我将值指定为id，将文本指定为name，但当我选择任何选项时，它将显示该值而不是name

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

另外，selectAll作为一个单独的选项，而不是选择所有的值

---

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

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

---

全选怎么样？你能不能也建议selectAll@AtalShrivastava检查一下，谢谢，伙计。您保存了我的第1天疑问，选择“全选”时，它将返回空数组；取消选择时，它将返回包含所有值的数组？