当前位置：首页 > React

react实现筛选

2026-01-26 13:48:32React

实现筛选功能的步骤

在React中实现筛选功能通常涉及以下几个关键部分：状态管理、筛选逻辑和渲染过滤后的数据。

状态管理 使用React的useState钩子来管理筛选条件和数据列表。例如：

const [data, setData] = useState([]);
const [filter, setFilter] = useState('');

筛选逻辑 根据筛选条件过滤数据。可以使用数组的filter方法：

const filteredData = data.filter(item => 
  item.name.toLowerCase().includes(filter.toLowerCase())
);

渲染过滤后的数据 在组件中渲染过滤后的数据：

{filteredData.map(item => (
  <div key={item.id}>{item.name}</div>
))}

输入框绑定 添加输入框来设置筛选条件：

<input 
  type="text" 
  value={filter}
  onChange={(e) => setFilter(e.target.value)}
  placeholder="Filter by name"
/>

高级筛选实现

对于更复杂的筛选需求，可以使用多个筛选条件：

多条件状态

const [filters, setFilters] = useState({
  name: '',
  category: '',
  priceRange: [0, 100]
});

多条件筛选逻辑

const filteredData = data.filter(item => {
  return (
    item.name.toLowerCase().includes(filters.name.toLowerCase()) &&
    (filters.category === '' || item.category === filters.category) &&
    item.price >= filters.priceRange[0] && 
    item.price <= filters.priceRange[1]
  );
});

多条件输入

<input 
  type="text" 
  value={filters.name}
  onChange={(e) => setFilters({...filters, name: e.target.value})}
  placeholder="Name"
/>

<select 
  value={filters.category} 
  onChange={(e) => setFilters({...filters, category: e.target.value})}
>
  <option value="">All Categories</option>
  <option value="electronics">Electronics</option>
  <option value="clothing">Clothing</option>
</select>

性能优化

对于大型数据集，可以考虑以下优化措施：

防抖处理 使用防抖来减少频繁的筛选操作：

import { debounce } from 'lodash';

const handleFilterChange = debounce((value) => {
  setFilter(value);
}, 300);

虚拟滚动 对于长列表，实现虚拟滚动：

import { FixedSizeList as List } from 'react-window';

<List
  height={500}
  itemCount={filteredData.length}
  itemSize={50}
  width={300}
>
  {({ index, style }) => (
    <div style={style}>
      {filteredData[index].name}
    </div>
  )}
</List>

使用Reducer管理复杂状态

对于更复杂的状态管理，可以使用useReducer：

定义reducer

const filterReducer = (state, action) => {
  switch (action.type) {
    case 'SET_NAME_FILTER':
      return { ...state, name: action.payload };
    case 'SET_CATEGORY_FILTER':
      return { ...state, category: action.payload };
    default:
      return state;
  }
};

使用reducer

const [filters, dispatch] = useReducer(filterReducer, {
  name: '',
  category: ''
});

dispatch({ type: 'SET_NAME_FILTER', payload: 'search term' });

第三方库解决方案

考虑使用专门的库来处理复杂筛选：

react-table

import { useTable, useFilters } from 'react-table';

const { getTableProps, headerGroups, rows, prepareRow } = useTable(
  { columns, data },
  useFilters
);

final-form

react实现筛选

import { Form, Field } from 'react-final-form';

<Form
  onSubmit={onSubmit}
  render={({ handleSubmit }) => (
    <form onSubmit={handleSubmit}>
      <Field name="filter" component="input" placeholder="Filter" />
    </form>
  )}
/>

这些方法提供了在React应用中实现筛选功能的不同方式，从简单到复杂，可以根据具体需求选择适合的方案。

标签: react