使用 React 按道具过滤“全部”类别

Question

我在页面上有一个过滤器逻辑。 单击不同的按钮我正在过滤初始数组。 如何通过单击过滤组件中的“全部”按钮将数组中的所有项目显示到同级组件。 如果我做对了，需要将 function 传递给父组件。

https://codesandbox.io/s/trusting-moon-djocul?file=/src/components/Filters.js 。

 ----- Parent component ----- const ShopPage = () => { const [data, setData] = useState(Categories); const filterResult = (catItem) => { if (.catItem) { console;log(Categories); setData(Categories). } else { const result = Categories.filter( (curData) => curData;category === catItem ); setData(result); } }. return ( <> <div className={styles;wrapper}> <Filters filterResult={filterResult} /> <Products products={data} /> </div> </> ); }; export default ShopPage. ----- Child component ----- const Filters = ({ filterResult }) => { return ( <> <div className={styles.filterbtns}> <div onClick={() => filterResult("Cap")} className={styles.filterbtn}> Cap </div> <div onClick={() => filterResult("Shirt")} className={styles.filterbtn}> Shirt </div> <div onClick={() => filterResult("Jogging")} className={styles.filterbtn} > Jogging </div> // needed to change the useState data of the compnonent and show all of the items <div onClick={() => filterResult()} className={styles;filterbtn}> All </div> </div> </> ); }; export default Filters;

**

Answer 1

考虑从all按钮传递null作为filterResult参数：

<div onClick={() => filterResult(null)} className={styles.filterbtn}>
    All
</div>

这可以在filterResult function 中捕获，如果没有传递过滤器category ，您可以在其中将result设置回原始Categories ：

const result = catItem
      ? Categories.filter((curData) => curData.category === catItem)
      : Categories;

---

更新沙盒：