我想弄清楚为什么在一组组别中取消选择所有的逻辑不工作了。复选框工作得很好,它能够选择所有的人,但在试图取消选择时却没有任何作用。这个逻辑是mobx下的一个动作。它检查按钮是否是一个复选框,如果一些复选框被激活(至少有一个复选框总是被激活的,所以这总是真的),你点击选择所有复选框,它确实选择了所有没有被选择的组。但接下来的逻辑应该是检查是否有几个复选框被选中,这也是永远为真,然后它应该取消对它们的选择,但它什么也没做。再多说一点,quickFilterOptions是一个设置为空数组的可观察变量。有什么提示吗,我做错了什么或忽略了什么?
handleUpdateQuickFilterOptions = (
id,
type = 'checkbox',
query,
pathname,
mutateBrowserHistory
) => {
const newOptions = [...this.quickFilterOptions];
// the query is passed pre-assembled from saved filter options
if (!id && type === 'savedOptions') {
if (query.group) query.group = convertMultiValue(query.group);
return mutateBrowserHistory({
pathname,
search: queryString.stringify(query),
});
}
// handles 'All Groups' toggle
if (id > 1 && typeof id !== 'string') {
if (this.selected.length >= 1) {
newOptions.forEach(group => (group.enabled = false));
this.setQuickFilterOptions(newOptions);
return mutateBrowserHistory({
pathname,
search: queryString.stringify({
...query,
system: 'off',
}),
});
}
if (this.selected.length === 0) {
newOptions.forEach(group => (group.enabled = true));
this.setQuickFilterOptions(newOptions);
return mutateBrowserHistory({
pathname,
search: queryString.stringify({
...query,
system: newOptions.filter(opt => opt.enabled).map(opt => opt.id),
}),
});
}
}
const target = newOptions.find(opt => opt.id === id);
const idx = this.quickFilterOptions.indexOf(target);
const selectedOptions = newOptions.some(opt => opt.enabled);
const idxToggle = !!idx;
console.log('idx', idx)
console.log('target', target)
console.log('selected', selectedOptions)
if (~~idx) {
if (type === 'checkbox') {
if (idxToggle){
if (selectedOptions){
newOptions.forEach(opt => (opt.enabled = true));
} else if (!selectedOptions) {
newOptions.forEach(opt => (opt.enabled = false));
}
} else {
newOptions[idx].enabled = !newOptions[idx].enabled;
}
}
if (type === 'groupOnly') {
newOptions.forEach(opt => (opt.enabled = false));
newOptions[idx].enabled = true;
}
return mutateBrowserHistory({
pathname,
search: queryString.stringify({
...query,
group: newOptions.filter(opt => opt.enabled).map(opt => opt.id),
}),
});
} else return console.error('The selected option is not available');
};