import React, {
useState,
Fragment,
useEffect,
useContext,
useRef,
} from "react";
import { CgSortAz } from "react-icons/cg";
import {
Menu,
MenuItem,
MenuButton,
SubMenu
} from '@szhsin/react-menu';
import '@szhsin/react-menu/dist/index.css';
const sortByPrice = () => {
let sortedProducts = _cloneArray(currentProducts);
if (sortedProducts === "lowest") {
sortedProducts = _sortArray(currentProducts, "Location Price");
} else if (sortedProducts === "highest") {
sortedProducts = _sortArray(currentProducts, "Location Price", sortedProducts === "lowest" ? "" :
"desc");
}
setCurrentProducts(sortedProducts)
console.log(sortedProducts, 'see something')
}
return (
<div className="store__page__sort">
<div className="store__page__sort__header">
<Menu menuButton={<MenuButton><CgSortAz /></MenuButton>}>
<MenuItem>Lowest to Highest</MenuItem>
<MenuItem>Highest to Lowest</MenuItem>
</Menu>
</div>
</div>
)
export default Store;
用户应该能够看到商店上的排序图标,以便他可以对商店中的商品进行排序。
用户应该看到从最低到最高价格的排序,以便他可以将商店中的商品从最低到最贵的商品重新排列。
用户应该看到按价格从高到低的排序,以便他可以将商店中的商品从最贵到最便宜重新排列。
用户应该能够通过点击相同的排序图标来删除排序。
答案 0 :(得分:0)
const productList=[
{ price: 30, property: "property" },
{ price: 10, property: "property" },
{ price: 40, property: "property" },
{ price: 5, property: "property" },
];
productList.sort((a,b)=> a.price - b.price );
console.log(productList);
结果是
[
{price: 5, property: "property"}
{price: 10, property: "property"}
{price: 30, property: "property"}
{price: 40, property: "property"}
]