ReactJS中使用Checkbox筛选素食与非素食餐厅菜单数据

• 第一步：添加数据筛选逻辑
  在组件中，渲染菜单前根据veg状态过滤数据。在获取到菜单数据（假设变量名为menus）后，新增以下代码：

// 根据veg状态过滤菜单数据
const filteredMenus = veg ? menus.filter(item => item.Type === "veg") : menus;

• 第二步：完善Checkbox交互逻辑
  替换原有的vegOnly函数相关代码，让Checkbox正确绑定状态并触发切换：

<label>
  <input
    type="checkbox"
    checked={veg}
    onChange={(e) => setVeg(e.target.checked)}
  />
  仅显示素食
</label>

• 第三步：更新菜单渲染逻辑
  将原本直接遍历menus的代码，改为遍历筛选后的filteredMenus：

{filteredMenus.map((menu, index) => (
  // 你的菜单项渲染代码
))}

完成以上修改后，勾选Checkbox时会仅展示Type为veg的菜品，取消勾选则恢复显示全部数据。

内容的提问来源于stack exchange，提问作者oneforall1