如何使用React Hook实现自定义下拉菜单的多选功能

修改思路 #

你当前只能单选是因为 useState 存储的是单个字符串值，改成存储选中项的数组即可实现多选，具体修改如下：

1. 调整 useState 定义
   将原来存储单个值的state改为存储选中品牌的数组，顺便修正原代码的变量拼写问题，新命名语义更清晰：

// 原来的写法
// const [brands, setBreands] = useState(null);
// 修改后
const [selectedBrands, setSelectedBrands] = useState([]);

2. 修改点击事件逻辑
   点击选项时判断当前品牌是否已被选中：已选中则从数组移除，未选中则加入数组，同时将最新的选中结果同步给父组件的setFilterData：

onClick={() => {
  let newSelected;
  if (selectedBrands.includes(brand.name)) {
    // 已选中则移除当前项
    newSelected = selectedBrands.filter(item => item !== brand.name)
  } else {
    // 未选中则加入当前项
    newSelected = [...selectedBrands, brand.name]
  }
  setSelectedBrands(newSelected)
  // 同步选中结果到父组件，可根据需求调整传递的数据格式
  setFilterData(newSelected)
}}

3. 调整选中样式判断逻辑
   判断当前品牌名是否在选中数组中，存在则添加selected类：

className={selectedBrands.includes(brand.name) ? "selected" : ""}

完整修改后组件代码 #

import { useState } from "react";
import { List, ListItem, ButtonBase, Typography } from "@mui/material";

//Styles
import useStyles from "Styles/Category/FilterWidget.styles";

//Data
import BrandData from "Data/Header/Brand.Data";

const Brand = ({ setFilterData }) => {
    const [selectedBrands, setSelectedBrands] = useState([]);
    const classes = useStyles();
    return (
        <div>
            <List className={classes.List}>
                {BrandData &&
                    BrandData.map((brand, i) => (
                        <ListItem key={i}>
                            <ButtonBase
                                onClick={() => {
                                    let newSelected;
                                    if (selectedBrands.includes(brand.name)) {
                                        newSelected = selectedBrands.filter(item => item !== brand.name)
                                    } else {
                                        newSelected = [...selectedBrands, brand.name]
                                    }
                                    setSelectedBrands(newSelected)
                                    setFilterData(newSelected)
                                }}
                                className={selectedBrands.includes(brand.name) ? "selected" : ""}
                            >
                                <Typography variant="body1" component="p">
                                    {brand.name}
                                </Typography>
                            </ButtonBase>
                        </ListItem>
                    ))
                }
            </List>
        </div>
    );
};

export default Brand;

内容的提问来源于stack exchange，提问作者user17234701