根据标题,我正在实现一个复选框,选中所有复选框,它可以工作,但当我逐个取消选中时,复选框将保留在当前行上,而在其他行上消失。
关于逻辑的注意:我有一个单独的组件,其中我有一个复选框来选择all,选中该复选框后,我在localstorage中设置了一个布尔变量,以便在另一个组件中读取。
principalcheckbox代码:
function handleChange() {
if (checked === false) {
localStorage.setItem('selectAllChecked', String(true))
dispatch(reduxActions.selectAll())
setChecked(true)
} else {
dispatch(reduxActions.clearSelection())
localStorage.setItem('selectAllChecked', String(false))
setChecked(false)
}
}
<input type='checkbox' checked={checked} onChange={handleChange} />
单复选框逻辑
<input
type='checkbox'
checked={checked ? checked : areAllSelected}
onChange={handleChange}
/>
让我们分析条件{checked?checked:areallselected}:
案例1:so checked initially为false(没有选择任何内容,因此它进入else->but are allselected也为false,因此最初没有选择任何内容->确定)
案例2:我点击单个复选框,使其处于选中状态,值为“选中”,从而正确选择单个项目->确定
案例3:我点击selectall,之前没有选中任何内容,因此条件转到else并全部选中-确定
案例4:与案例3相同,我选择了所有内容,但当我单击单行时,selectall的值为false,单行中的一行为true(但之前也被选中),并且它保持选中状态,而应该取消选中
关于如何实现这一点有什么想法吗?
1条答案
按热度按时间nr9pn0ug1#
重新设计逻辑会更容易。
“全部”复选框的选择/取消选择应触发所有项目的真实更改,以选择或取消选择。
“全部”复选框的实际状态应由其余“单个”复选框的状态计算。