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

Question

我正在尝试根据复选框中的 selected/checked 值填充一个数组。假设我们有 3 个字符串数组

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

和另一个包含复选框值的数组。

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

我的目标是将与选中值同名的数组推送到一个数组（比方说 selectedProductArray）。这是我到目前为止所做的，它只添加了一个 selected/checked 数组。

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

我正在尝试根据复选框选择将多个数组推送到数组。
例如，如果在复选框列表中选中了 cars 和 phones 值，则所需的数组将如下所示

["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>
  );
}

任何帮助将不胜感激

Answer 1

此答案旨在协助 OP below-stated objective,

For example, if there are checked cars and phones values in checkbox list, the desired array would look like so

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

为此，请进行以下更改：

首先，像这样声明一个对象：

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

接下来，在 outer/top-most <div> 下方添加以下行：

{JSON.stringify(nameArr.flatMap(name => nameArrayOfObj[name]))} <br/><br/><br/>

现在，当用户选择复选框 cars、phones、laptops 时，这些数组中的相应项目将呈现在 Select 下拉列表的正上方。

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

How to push multiple items to an array based on checked value from multiple checkbox list?

javascript

reactjs

material-ui