材质 UI 在数组中选择多项选择答案

【问题标题】：Material UI Select Multiple Selection in Array材质 UI 在数组中选择多项选择
【发布时间】：2021-09-30 01:16:51
【问题描述】：

我使用 React 创建了一个 Select，它允许用户选择多个选项。问题是 Select 显示所选项目的 ID，而不是它们的名称。如何更改代码以使 Select 显示以逗号分隔的名称（现在显示以逗号分隔的 ID），同时保留 id 数组以供以后处理。

知道如何解决吗？这是CodeSanbox的代码

我在 Material UI Select 中有以下数组：

const names = [
  { id: "1", value: "Oliver Hansen" },
  { id: "2", value: "Van Henry" },
  { id: "3", value: "Omar Alexander" }
];

这是呈现多选的代码：

<Select
          labelId="demo-mutiple-checkbox-label"
          id="demo-mutiple-checkbox"
          multiple
          value={personName}
          name="first"
          onChange={handleChange}
          input={<OutlinedInput label="Tag" />}
          renderValue={(selected) => selected.join(", ")}
        >
          {names.map((name) => (
            <MenuItem key={name.id} value={name.id}>
              <Checkbox checked={personName.indexOf(name.id) > -1} />
              <ListItemText primary={name.value} />
            </MenuItem>
          ))}
        </Select>

【问题讨论】：

您想显示名称，但还要将所选名称的 ID 保留在状态中？

标签： reactjs material-ui

【解决方案1】：

我为您的问题找到了一种可能的解决方案。

检查它是否适合你。

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Input, OutlinedInput } from "@material-ui/core";
import InputLabel from "@material-ui/core/InputLabel";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import ListItemText from "@material-ui/core/ListItemText";
import Checkbox from "@material-ui/core/Checkbox";

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 300
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  }
}));

const names = [
  { id: "1", value: "Oliver Hansen" },
  { id: "2", value: "Van Henry" },
  { id: "3", value: "Van Henry" }
];

export default function NativeSelects() {
  const classes = useStyles();
  const [personName, setPersonName] = React.useState([]);

  const handleChange = (event) => {
    const {
      target: { value }
    } = event;
    setPersonName(
      // On autofill we get a the stringified value.
      typeof value === "string" ? value.split(",") : value
    );
  };

  return (
    <div>
      <FormControl className={classes.formControl}>
        <InputLabel htmlFor="age-native-simple">
          Names here to select from
        </InputLabel>
        <Select
          labelId="demo-mutiple-checkbox-label"
          id="demo-mutiple-checkbox"
          multiple
          value={personName}
          name="first"
          onChange={handleChange}
          input={<OutlinedInput label="Tag" />}
          renderValue={(selected) => selected.map(obj=> names[obj - 1].value).join(", ")}
        >
          {names.map((name) => (
            <MenuItem key={name.id} value={name.id}>
              <Checkbox checked={personName.indexOf(name.id) > -1} />
              <ListItemText primary={name.value} />
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

Updated Code

【讨论】：

天才解决方案。非常感谢！

【解决方案2】：

要显示所选用户的姓名，您可以更新map 部分，目前您使用的是id。

您可以将其更新为使用 name.value 来存储/显示此人的姓名。

{names.map((name) => (
   <MenuItem key={name.value} value={name.value}>
     <Checkbox checked={personName.indexOf(name.value) > -1} />
     <ListItemText primary={name.value} />
   </MenuItem>
 ))}

Updated Sandbox

【讨论】：

这种方式可能会出现问题，如果数组中有重复的名称。
没错，出于这个原因，我还需要 ID 列表。
是的，在这种情况下，这不是最佳解决方案。

【解决方案3】：

你可以这样做：

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

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

【解决方案4】：

我所做的简单步骤，只关注 renderValue 属性，Select 组件：

renderValue={(selected) => names.find((val) => val.id === selected).value}

我使用的逻辑，在'names'数组中找到值，其中id为选中的id，然后取'value'中的值em>'names' 数组，要显示。

【讨论】：

【解决方案5】：

将菜单项的值更新为对象而不是 id。

    <Select
      labelId="demo-mutiple-checkbox-label"
      id="demo-mutiple-checkbox"
      multiple
      value={personName}
      name="first"
      onChange={handleChange}
      input={<OutlinedInput label="Tag" />}
      renderValue={(selected) => selected.map((item) => item.value)?.join(",")}
    >
      {names.map((name) => (
        <MenuItem key={name.id} value={name}>
          <Checkbox
            checked={personName.find((p) => p.id === name.id) !== undefined}
          />
          <ListItemText primary={name.value} />
        </MenuItem>
      ))}
    </Select>

【讨论】：