Javascript 如何根据多个复选框列表中的选中值将多个项目推送到数组

我正在try 根据复选框中的选定/选中值填充array.

const cars = ["Ford", "Chevy", "Honda", "Toyota"];
const phones = ["iPhone", "Samsung", "Nokia", "Sony"];
const laptops = ["Mac", "Dell", "HP", "Acer"];

以及另一个包含复选框值的array.

const names = ["cars", "phones", "laptops"];

我的目标是将与选中值同名的数组推送到一个数组(比如selectedProductArray).

const selectedProductArray = [];
  const selectedProductInfo = nameArr.includes("phones")
    ? selectedProductArray.concat(phones)
    : nameArr.includes("laptops")
    ? selectedProductArray.concat(laptops)
    : selectedProductArray.concat(cars);

我正在try 根据复选框 Select 多个数组来推送到数组

["Ford", "Chevy", "Honda", "Toyota", "iPhone", "Samsung", "Nokia", "Sony];

全部代码和demo sandbox link

import * as React from "react";
import OutlinedInput from "@mui/material/OutlinedInput";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import ListItemText from "@mui/material/ListItemText";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import Checkbox from "@mui/material/Checkbox";

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250
    }
  }
};

const cars = ["Ford", "Chevy", "Honda", "Toyota"];
const phones = ["iPhone", "Samsung", "Nokia", "Sony"];
const laptops = ["Mac", "Dell", "HP", "Acer"];

const names = ["cars", "phones", "laptops"];

export default function MultipleSelectCheckmarks() {
  const [nameArr, setNameArr] = React.useState<string[]>([]);

  const handleChange = (event: SelectChangeEvent<typeof nameArr>) => {
    const {
      target: { value }
    } = event;
    setNameArr(typeof value === "string" ? value.split(",") : value);
  };

  const selectedProductArray = [];
  const selectedProductInfo = nameArr.includes("phones")
    ? selectedProductArray.concat(phones)
    : nameArr.includes("laptops")
    ? selectedProductArray.concat(laptops)
    : selectedProductArray.concat(cars);
  console.log("selectedProductInfo", selectedProductInfo);
  console.log("selectedProductArray", selectedProductArray);

  return (
    <div>
      <FormControl sx={{ m: 1, width: 300 }}>
        <InputLabel id="demo-multiple-checkbox-label">Tag</InputLabel>
        <Select
          labelId="demo-multiple-checkbox-label"
          id="demo-multiple-checkbox"
          multiple
          value={nameArr}
          onChange={handleChange}
          input={<OutlinedInput label="Tag" />}
          renderValue={(selected) => selected.join(", ")}
          MenuProps={MenuProps}
        >
          {names.map((name) => (
            <MenuItem key={name} value={name}>
              <Checkbox checked={nameArr.indexOf(name) > -1} />
              <ListItemText primary={name} />
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

任何帮助都将不胜感激