javascript - 过滤低值余额并隐藏空复选框

Question

我正在使用 React + Typescript。我想请你帮忙过滤。我有两个过滤器

隐藏低价值账户

隐藏空账户

用户设置为道具的低值<“thresholdLowValue”，用户可以将此阈值定义为例如数字3。并过滤隐藏空帐户<0。选中复选框后过滤有效，但在一种情况下，隐藏空帐户过滤器会覆盖隐藏低值帐户过滤器。

组合检查后= true：隐藏低价值的帐户&&隐藏空帐户=仅隐藏空帐户有效。

const [preparedItems, setPreparedItems] = useState(items);
const [checkboxState, setCheckboxState] = React.useState({
    lowValue: false,
    emptyValue: false
  });

const filterChange = (value): void => {
    if (value.lowValue) {
      setPreparedItems(
        items.filter(item => item.balance >= (thresholdLowValue || 0))
      );
    } else {
      if (value.emptyValue) {
        setPreparedItems(items.filter(item => item.balance > 0));
      } else {
        setPreparedItems(items);
      }
    }
  };

const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
    event.stopPropagation();
    filterChange({[event.target.name]: event.target.checked})
    setCheckboxState({
      ...checkboxState,
      [event.target.name]: event.target.checked
    })
  };
<FormGroup>
            <FormControlLabel
              control={(
                <Checkbox
                  checked={checkboxState.lowValue}
                  onChange={handleChange}
                  name="lowValue"
                  color="primary"
                />
              )}
              label="Hide accounts with low value"
            />
            <FormControlLabel
              control={(
                <Checkbox
                  checked={checkboxState.emptyValue}
                  disableRipple
                  onChange={handleChange}
                  name="emptyValue"
                  color="primary"
                />
              )}
              label="Hide empty account"
            />
       </FormGroup>

你能帮我解决这个问题吗？也许你有更好的解决方案？

标签： javascriptreactjscheckboxfilter