复选框按钮能够选择全部但不能取消选择(附代码)

84 阅读1分钟

我想弄清楚为什么在一组组别中取消选择所有的逻辑不工作了。复选框工作得很好,它能够选择所有的人,但在试图取消选择时却没有任何作用。这个逻辑是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');
  };