【问题标题】:Material UI Checkbox (multiple select), state managementMaterial UI Checkbox(多选),状态管理
【发布时间】:2022-12-18 19:50:15
【问题描述】:
有谁知道我怎样才能得到所有检查项目的数组?
我想要的是能够从一页导航到另一页,但所有复选框都需要保持选中状态。我打算使用 localstorage 来保存数据,但无法弄清楚如何获取数据(选中的项目)。我需要将什么推送到 LocalStorage?
此外,一旦我设法在 localstorage 中设置数据,我如何将其应用于下拉选择组件以确保再次选中所有上一个选中的框?
代码与此处完全相同(复选标记示例)
https://mui.com/material-ui/react-select/
我希望我的问题是有道理的。
干杯!
【问题讨论】:
标签:
reactjs
checkbox
material-ui
【解决方案1】:
我需要将什么推送到 LocalStorage?
如果选中元素,只需一个名称和一个布尔值即可
此外,一旦我设法在 localstorage 中设置数据,我如何将其应用于下拉选择组件以确保再次选中所有上一个选中的框?
这里肯定有几个选项,简单的解决方案是在 useEffect 中运行一个函数(或者甚至更好地创建一个自定义挂钩)来尝试获取这些本地存储值(如果它们存在)并将它们设置为本地状态(自定义挂钩可以只返回值).
其他选择是使用 Context 或其他状态管理库来存储这些值而不是 localstorage,然后使用这些选项提供的挂钩在页面组件内访问这些值。