如何从 MUI 中的多 select 中获取选定的复选框值和 id

Question

我正在使用具有多选功能的 MUI select 组件。 多选渲染使用下面的 JSON 数组。 有什么方法可以同时获取所选项目的 ID 和值？

这里是代码沙箱URL： https://codesandbox.io/s/cranky-currying-ce8djy?file=/src/App.js

JSON Array: const menuItems = [
  { id: "8271e42a-8982-44b8-9745-3271e0cf9d12", value: "Item 1" },
  { id: "c0f3e462-02f8-4d8d-ae05-6965b7902a80", value: "Item 2" },
  { id: "c0f3dfyh-02f8-4d8d-ae05-6965b7dw3456", value: "Item 3" }
];



 export default function App() {
  const [selected, setSelected] = useState([]);

  const handleChange = (event) => {
    const {
      target: { value }
    } = event;
    setSelected(typeof value === "string" ? value.split(",") : value);
    console.log(selected);
  };

  const ITEM_HEIGHT = 48;
  const ITEM_PADDING_TOP = 8;

  const lteProps = {
    PaperProps: {
      style: {
        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
        width: 250
      }
    }
  };
  return (
    <div className="App">
      <FormControl fullWidth={true}>
        <Select
          multiple
          value={selected}
          onChange={handleChange}
          renderValue={(selected) => selected.join(", ")}
          MenuProps={lteProps}
        >
          {menuItems.map((item) => (
            <MenuItem key={item.id} value={item.value}>
              <Checkbox checked={selected.indexOf(item.value) > -1} />
              <ListItemText primary={item.value} />
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

感谢任何帮助。

Answer 1

我以前在 MUI 工作过。
您需要在handleChange function 中再添加一个参数来访问 ID。 但它目前正在返回带有.$的 ID。 所以你必须过滤这两个字符。

  const handleChange = (event,obj) => {
    const {
      target: { value }
    } = event;
    setSelected(typeof value === "string" ? value.split(",") : value);
    // on selecting first option, will return
    // .$8271e42a-8982-44b8-9745-3271e0cf9d12
    console.log(obj.key);
  };