如何在React JS中实现基于下拉选项的页面多条件筛选功能

核心思路 #

你需要把筛选逻辑和分页逻辑做联动，核心是先按选中的筛选规则过滤全量数据，再基于过滤后的结果集计算分页数据，而不是直接对全量原始数据做分页。

具体实现步骤 #

• 第一步：新增状态存储筛选条件
  在组件内定义状态存储三个筛选项的选中值：

const [filters, setFilters] = useState({
  experience: '',
  price: '',
  gender: ''
})

• 第二步：给下拉选择器绑定变更事件
  给每个Select组件的onChange事件绑定处理函数，同步更新filters状态，同时每次筛选条件变更后把页码重置为1，避免筛选后数据量不足导致当前页码无效。

const handleFilterChange = (type, value) => {
  setFilters(prev => ({...prev, [type]: value}))
  setCurrentPage(1) // 筛选后回到第一页
}

每个下拉选择器对应绑定即可，比如经验选择器的onChange就传(val) => handleFilterChange('experience', val)。

• 第三步：编写过滤逻辑
  新增过滤函数，根据filters的值对原始人员数据做过滤：

const getFilteredData = () => {
  return originalData.filter(item => {
    // 经验过滤，若下拉value为区间字符串格式可按此逻辑处理，可根据实际传值调整
    if (filters.experience) {
      const [minExp, maxExp] = filters.experience.split('-').map(Number)
      if (item.experience < minExp || item.experience > maxExp) return false
    }
    // 价格过滤，逻辑和经验一致，可根据下拉value的实际格式调整
    if (filters.price) {
      const [minPrice, maxPrice] = filters.price.split('-').map(Number)
      if (item.price < minPrice || item.price > maxPrice) return false
    }
    // 性别过滤，全等匹配即可
    if (filters.gender && item.gender!== filters.gender) return false
    return true
  })
}

• 第四步：调整分页逻辑的数据源
  原来分页计算用的是原始全量数据，现在改成用过滤后的数据集：

const filteredData = getFilteredData()
// 分页计算基于过滤后的数据
const indexOfLastItem = currentPage * itemsPerPage
const indexOfFirstItem = indexOfLastItem - itemsPerPage
const currentItems = filteredData.slice(indexOfFirstItem, indexOfLastItem)
// 总页数也基于过滤后的数据长度计算
const totalPages = Math.ceil(filteredData.length / itemsPerPage)

注意事项 #

如果后续改为接口请求实现分页筛选，不需要做前端过滤，直接把筛选参数和页码传给后端，由后端返回对应分页数据即可。

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