Я пытаюсь заполнить массив на основе выбранных/отмеченных значений из флажка. Допустим, у нас есть 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
) массив с тем же именем, что и проверенное значение.
Вот что я сделал до сих пор, добавляя только один выбранный/проверенный массив.
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];
Весь код и ссылка на демонстрационную песочницу
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 handleChangeEvent = (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.info("selectedProductInfo", selectedProductInfo);
console.info("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 = {handleChangeEvent}
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>
);
}
Любая помощь будет оценена
Привет, @jsN00b, спасибо за рекомендацию. Я попробую.
Пожалуйста, попробуйте подход с использованием объекта obj
. Пожалуйста, не попробуйте eval
— это большой нет нет. :-)
@ jsN00b еще раз спасибо за ответ. Я попробовал способ, который вы рекомендовали. И вот что я получил. Подскажите, пожалуйста, что я делаю не так codeandbox.io/s/…
Этот ответ направлен на то, чтобы помочь ОП достичь указанной ниже цели,
For example, if there are checked
cars
andphones
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"]
};
Затем добавьте следующую строку сразу под внешним/самым верхним <div>
:
{JSON.stringify(nameArr.flatMap(name => nameArrayOfObj[name]))} <br/><br/><br/>
Теперь, когда пользователь устанавливает флажки cars
, phones
, laptops
, соответствующие элементы из этих массивов будут отображаться чуть выше раскрывающегося списка Select
.
Высоко не рекомендуется и не рекомендуется:
nameArr.flatMap(x => eval(x))
. Лучшим, разумным/мудрым подходом было бы пересмотреть три массиваcars
,phones
,laptops
и поместить их в виде пар ключ-значение в общий объект (например:const obj = { cars: ["Audi", "Porsche", ...], phones: ["ROG", "Pixel", ....], ...};
). Затем obj.cars получит массив cars. И,nameArr.flatMap(x => obj[x]);