如何解决如何通过React bootstrap的Dropdown组件对ReactJs中的产品进行过滤和排序
我正在为用户的UI中的产品列表创建过滤器功能。但是我有一个问题，我不知道并且从来没有尝试过此功能，所以我真的很难解决它。我只剩下1天的时间了，所以我很困惑
这是我的Dropdown组件
import React from "react";
import { Dropdown as BootstrapDropdown } from "react-bootstrap";
import PropTypes from "prop-types";
import "../Dropdown/index.css";
const Dropdown = ({ items }) => {
return (
<BootstrapDropdown className="sort-dropdown">
<BootstrapDropdown.Toggle
className="sort-dropdown-toggle"
variant="success"
id="dropdown"
>
<span className="toggle-text">Selection</span>
</BootstrapDropdown.Toggle>
<BootstrapDropdown.Menu className="sort-dropdown-menu">
{items.map((name,index) => (
<BootstrapDropdown.Item
className="sort-dropdown-item"
key={index}
href={`#/action-${index}`}
>
{name}
</BootstrapDropdown.Item>
))}
</BootstrapDropdown.Menu>
</BootstrapDropdown>
);
};
Dropdown.propTypes = {
items: PropTypes.array,};
Dropdown.defaultProps = {
items: [],};
export default Dropdown;
这是我的页面，是我获得Dropdown组件的地方
import React from "react";
import { Row } from "react-bootstrap";
import Group from "../../../components/Group/index";
import Dropdown from "../../../components/Dropdown/index";
import "../GroupBar/index.css";
const GroupBar = () => {
return (
<Row className="group-bar">
<Group
title="Product group"
element={<Dropdown items={["Milk Tea","Juice"]} />}
/>
<Group
title="Sort by price"
element={<Dropdown items={["Low to hight","Hight to low"]} />}
/>
</Row>
);
}
export default GroupBar;
我想通过下拉列表items对产品页面进行过滤（按类别）和排序（按价格）。当我选择该项目时，产品将根据我选择的项目进行过滤。
这是我的产品列表页面
import React,{ useEffect } from "react";
import { Container,Row,Col } from "react-bootstrap";
import ProductItem from "../../../components/ProductItem/index";
import Loading from "../../../components/Loading";
import PropTypes from "prop-types";
import "../../../common/index.css";
import "../ProductList/index.css";
const ProductList = ({ products,loading,fetchProductRequest }) => {
useEffect(() => {
fetchProductRequest();
// eslint-disable-next-line react-hooks/exhaustive-deps
},[]);
if (loading) {
return (
<Container>
<Row>
<Col>
<Loading />
</Col>
</Row>
</Container>
);
}
return (
<Container>
<Row>
{!!products && products.length > 0 ? (
products.map((product,index) => {
return (
<ProductItem
key={index}
image={product.image}
name={product.name}
price={product.price}
/>
);
})
) : (
<h4 className="center-title">Product list is empty!</h4>
)}
</Row>
</Container>
);
};
export default ProductList;
这是该页面，
产品列表和过滤器/排序位于相同的文件夹中，但位于不同的文件中。像这样
包含所有内容的主页在这里
import React from "react";
import { Container } from "react-bootstrap";
import GroupBar from "./GroupBar";
import ProductContainer from "../../containers/ProductContainer";
import Carousel from "../../components/Carousels";
import "../Product/index.css";
const Product = () => {
return (
<Container fluid className="p-0">
<Carousel />
<Container>
<GroupBar />
<ProductContainer />
</Container>
</Container>
);
};
export default Product;
当类似这样的文件时，如何过滤与列表产品相关的内容。
Please anyone help me with this my problem,I just have one day to finish that function，我已经在互联网上进行了研究，但这并不能使我了解更多，因为它与我的代码有很大不同，因此我无法将其应用于我的代码。
我真的非常需要您的支持和帮助，并且更好。不仅帮助我了解了像我这样的其他人，他们在尝试之前也没有尝试过它，也看到了代码也很容易理解。
我总是欢迎您的所有评论。那是我的荣幸。非常感谢。
解决方法
您将需要您的组件来跟踪某些状态。您可以阅读有关here和here的操作方法。
一旦了解了状态的概念，就需要跟踪选择列表中的哪个项目。因此，例如，您需要保留一个状态变量，以跟踪是选择了“牛奶茶”还是“果汁”。
然后，一旦处于该状态，就可以使用filter列表上的sort或items显示项目。
我个人建议使用类组件而不是函数组件，但这是使用函数组件的最小工作示例：
import React,{ useState } from 'react';
import { Dropdown as BootstrapDropdown } from 'react-bootstrap';
import './App.css';
const Dropdown = (props) => {
return (
<BootstrapDropdown>
<BootstrapDropdown.Toggle variant='success' id='dropdown'>
<span>Selection</span>
</BootstrapDropdown.Toggle>
<BootstrapDropdown.Menu>
{props.items.map((name,index) => (
<BootstrapDropdown.Item
key={index}
onClick={(event) => {
console.log(event.target.text);
props.setSelected(event.target.text);
}}
value={name}
>
{name}
</BootstrapDropdown.Item>
))}
</BootstrapDropdown.Menu>
</BootstrapDropdown>
);
};
function App() {
const [typeFilter,setTypeFilter] = useState('');
const allItems = [
{ name: 'Coffee Milk Tea',type: 'Tea' },{ name: 'Earl Gray Milk Tea',{ name: 'Orange Juice',type: 'Juice' },{ name: 'Wheatgrass Juice',];
const itemsToShow = allItems
.filter((item) => {
if (typeFilter) {
return item.type === typeFilter;
}
return true;
})
.map((item,i) => {
return <li key={i}>{item.name}</li>;
});
return (
<div>
<Dropdown items={['Tea','Juice']} setSelected={setTypeFilter} />
<ol>{itemsToShow}</ol>
</div>
);
}
export default App;
请注意，App组件存储了状态，并将其状态设置器传递给Dropdown组件。 Dropdown使设置器进入其props，并在单击选项时使用它来设置App的状态。 App然后使用其状态来确定要显示的项目（使用items.filter）。
这是Lifting state up的示例。通常，我们会考虑跟踪选择哪个项目作为下拉菜单的工作。但是，由于我们需要在另一个组件中访问该状态，因此我们必须将该状态“提升”到树中更高的位置。在这个小例子中，存储状态的是App。通常，如果树看起来像这样：
- A
- B
- C
- D
- E
- F
- G
- F
- H
- B
，并且要在G和D之间共享状态，您需要将该状态放入A内，因为A是G和D的最接近父级。如果要在C和D之间共享状态，则需要将该状态放入B，因为B是C和D的父代。
关于下面的评论，您可能希望保持在Product组件内选择下拉菜单中的内容的状态。然后，您需要将状态设置器一直沿props链传递到Dropdown组件中，该组件可以调用该设置器并更新状态。
很抱歉得知您的日程安排很紧。希望这个答案对您有用。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。