使用反應鉤子選擇多個專案？

我正在構建下一個 js 應用程式。在這里，我正在創建一個自定義下拉選擇選單。使用 react hook-- useState.. 我按照以下方式撰寫代碼。

資料-

export default [
    { name: "Xioami" },
    { name: "Samsung" },
    { name: "Apple" },
    { name: "Oppo" },
    { name: "Techno" },
    { name: "Itel" },
    { name: "Oneplus" },
    { name: "Amazon" },
    { name: "Okla" },
    { name: "Chemisty" },
    { name: "Physics" },
]

反應組件-

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 [brands, setBreands] = useState(null);
    const classes = useStyles();
    return (
        <div>
            <List className={classes.List}>
                {BrandData &&
                    BrandData.map((brand, i) => (
                        <ListItem key={i}>
                            <ButtonBase
                                onClick={() => setBreands(brand.name)}
                                className={brands === brand.name ? "selected" : ""}
                            >
                                <Typography variant="body1" component="p">
                                    {brand.name}
                                </Typography>
                            </ButtonBase>
                        </ListItem>
                    ))
                }
            </List>
        </div>
    );
};

export default Brand;

在組件中，我也添加了onClick和className。當用戶單擊一個專案時，它會存盤在其中useState，然后當匹配名稱時，它還會添加一個selected類。

但問題是用戶一次只能選擇一項。但我需要將多個專案useState添加className到該專案然后添加到該專案的功能。我怎樣才能做到這一點？

uj5u.com熱心網友回復：

存盤一個陣列或一組Set選定的專案，而不僅僅是單個選定的專案。

例如（見評論）：

const Brand = ({ setFilterData }) => {
    // *** Default state is an empty set vvvvvvvvv
    const [brands, setBrands] = useState(new Set());
    const classes = useStyles();

    // Select a brand
    const selectBrand = (brand) => {
        // *** Use the callback version here, since you're setting state
        // based on existing state
        setBrands(brands => {
            if (!brands.has(brand)) {
                brands = new Set(brands);
                brands.add(brand);
            }
            // *** You might have an `else` here calling
            // `delete` if you want clicks to toggle
            // selection
            return brands;
        });
    };

    return (
        <div>
            <List className={classes.List}>
                {BrandData &&
                    BrandData.map((brand, i) => (
                        <ListItem key={i}>
                            <ButtonBase
                                {/* *** Click selects the brand */}
                                onClick={() => selectBrand(brand)}
                                {/* *** Test that the brand is selected via `has` */}
                                className={brands.has(brand) ? "selected" : ""}
                            >
                                <Typography variant="body1" component="p">
                                    {brand.name}
                                </Typography>
                            </ButtonBase>
                        </ListItem>
                    ))
                }
            </List>
        </div>
    );
};

標籤：javascript 反应 反应钩子 下一个.js

上一篇：如何在ReactJS中的字串內呈現跨度陣列？

下一篇：獲取先前的值并更新n 1項