时间戳

首页 > 解决方案 > 按类别过滤 react 和 bootstrap

reactjs - 按类别过滤 react 和 bootstrap

问题描述

我正在建立一个电子商务网站，我正在尝试在主页上添加类别按钮，这样当您单击特定类别时，只会显示这些项目。我正在使用 redux 将所有项目带到主屏幕。

const products = [
  {
    name: 'Airpods Wireless Bluetooth Headphones',
    image: '/images/airpods.jpg',
    description:
      'Bluetooth technology lets you connect it with compatible devices wirelessly High-quality AAC audio offers immersive listening experience Built-in microphone allows you to take calls while working',
    brand: 'Apple',
    category: 'Headphones',
    price: 89.99,
    countInStock: 10,
    rating: 4.5,
    numReviews: 12,
  },

项目结构如下所示。

这是我在 HomeScreen 组件上的代码：

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Row, Col, Button, ButtonGroup } from 'react-bootstrap';
import Product from '../components/Product';
import Loader from '../components/Loader';
import Message from '../components/Message';
import { listProducts } from '../actions/productActions';

const HomeScreen = () => {
  const dispatch = useDispatch();

  const productList = useSelector(state => state.productList);
  const { loading, error, products } = productList;

  const allCategories = [
    'All',
    ...new Set(products.map(product => product.category)),
  ];
  console.log(allCategories);

  useEffect(() => {
    dispatch(listProducts());
  }, [dispatch]);

  return (
    <>
      <div className="text-center my-4">
        <ButtonGroup>
          <Button className="btn-color-primary" style={{ margin: '5px' }}>
            All
          </Button>
          <Button className="btn-color-primary" style={{ margin: '5px' }}>
            Phones
          </Button>
          <Button className="btn-color-primary" style={{ margin: '5px' }}>
            Headphones
          </Button>
          <Button className="btn-color-primary" style={{ margin: '5px' }}>
            Cameras
          </Button>
          <Button className="btn-color-primary" style={{ margin: '5px' }}>
            Cameras
          </Button>
          <Button className="btn-color-primary" style={{ margin: '5px' }}>
            PlayStation
          </Button>
        </ButtonGroup>
      </div>
      {loading ? (
        <Loader />
      ) : error ? (
        <Message variant="danger">{error}</Message>
      ) : (
        <Row>
          {products.map(product => (
            <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
              <Product product={product} />
            </Col>
          ))}
        </Row>
      )}
    </>
  );
};

export default HomeScreen;

我创建了一个变量，其中包含映射的产品中的所有类别以及“全部”类别。我应该向按钮添加什么，以便当我单击它们时它会按需要工作？

标签： reactjsreduxcategoriesreact-bootstrap

解决方案

您可以创建一个具有所选类别名称的状态变量。在呈现产品之前，过滤具有该类别作为选定类别的产品。

const [selectedCategory, setSelectedCategory] = useState("All");
const handleClick = (category) => setSelectedCategory(category);

现在，对于按钮，您应该添加一个 onClick 事件侦听器，该侦听器在单击时更改 selectedCategory。例如

<ButtonGroup>
    {
     allCategories.map(category => (
        <Button onClick={() => handleClick(category)} key={category} className="btn-color-primary" style={{ margin: '5px' }}>
            {category}
        </Button>)
    }
 </ButtonGroup>

现在，如果 selectedCategory 不是“All”，则过滤产品

products.filter(product => selectedCategory==="All" || product.category===selectedCategory)
    .map(product => (
        <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
            <Product product={product} />
        </Col>))

推荐阅读