React中如何实现多字段（公司/所有者/城市）复选框过滤

核心思路是按字段分组管理选中状态，给每个复选框添加name属性标记所属字段，替代原有的单一值数组，这样就能精准区分选中值对应的字段类型，实现高效的多字段联合过滤。

步骤1：给复选框添加name属性 #

为每组复选框添加对应字段的name，明确其所属分类：

<!-- 公司组 -->
<input onChange={handleChange} type="checkbox" name="company" value="Seattle Sutton" />
<input onChange={handleChange} type="checkbox" name="company" value="Starbucks" />
<input onChange={handleChange} type="checkbox" name="company" value="Caribou" />

<!-- 所有者组 -->
<input onChange={handleChange} type="checkbox" name="owner" value="Gartling" />
<input onChange={handleChange} type="checkbox" name="owner" value="Schultz" />
<input onChange={handleChange} type="checkbox" name="owner" value="Leland" />

<!-- 城市组 -->
<input onChange={handleChange} type="checkbox" name="city" value="Des Moines" />
<input onChange={handleChange} type="checkbox" name="city" value="Cleveland" />
<input onChange={handleChange} type="checkbox" name="city" value="Tenessee" />

步骤2：调整状态为字段分组对象 #

将原有的fieldSelectedArray替换为按字段分组的对象，初始化状态如下：

const [selectedFilters, setSelectedFilters] = useState({
  company: [],
  owner: [],
  city: []
});

步骤3：更新handleChange函数 #

根据复选框的name属性，精准更新对应字段的选中值数组：

const handleChange = (e) => {
  const { name, value, checked } = e.target;
  setSelectedFilters(prevState => {
    const updatedValues = [...prevState[name]];
    if (checked) {
      updatedValues.push(value);
    } else {
      const valueIndex = updatedValues.indexOf(value);
      if (valueIndex !== -1) {
        updatedValues.splice(valueIndex, 1);
      }
    }
    return { ...prevState, [name]: updatedValues };
  });
};

步骤4：实现多字段联合过滤逻辑 #

根据业务需求选择对应的过滤逻辑：

场景1：匹配任意选中条件（或关系） #

筛选出公司/所有者/城市任意一个匹配选中项的对象：

const filteredResults = resultSet.filter(item => {
  // 无选中项时返回所有结果
  const hasActiveFilters = Object.values(selectedFilters).some(arr => arr.length > 0);
  if (!hasActiveFilters) return true;

  return selectedFilters.company.includes(item.company) ||
         selectedFilters.owner.includes(item.owner) ||
         selectedFilters.city.includes(item.city);
});

场景2：匹配所有选中字段的条件（与关系） #

筛选出满足所有已选中字段条件的对象（未选中的字段不参与过滤）：

const filteredResults = resultSet.filter(item => {
  const matchesCompany = selectedFilters.company.length === 0 || selectedFilters.company.includes(item.company);
  const matchesOwner = selectedFilters.owner.length === 0 || selectedFilters.owner.includes(item.owner);
  const matchesCity = selectedFilters.city.length === 0 || selectedFilters.city.includes(item.city);

  return matchesCompany && matchesOwner && matchesCity;
});

方案优势 #

• 无需给复选框value添加额外标记（如前缀后缀），保持数据纯净
• 状态结构清晰，便于维护和扩展其他字段
• 过滤逻辑直观，性能适配1000条数据的规模完全没问题

内容的提问来源于stack exchange，提问作者questionsneedanswers