当前位置：首页 > React

react如何写多条件搜索功能

2026-01-26 03:52:22React

实现多条件搜索功能

在React中实现多条件搜索功能，通常需要结合状态管理和筛选逻辑。以下是几种常见实现方式：

使用useState管理搜索条件

通过useState管理多个搜索条件，并在渲染时进行筛选：

react如何写多条件搜索功能

const [searchTerm, setSearchTerm] = useState({
  name: '',
  age: '',
  status: ''
});

const filteredData = originalData.filter(item => {
  return (
    item.name.toLowerCase().includes(searchTerm.name.toLowerCase()) &&
    (searchTerm.age === '' || item.age === parseInt(searchTerm.age)) &&
    (searchTerm.status === '' || item.status === searchTerm.status)
  );
});

const handleInputChange = (e) => {
  const { name, value } = e.target;
  setSearchTerm(prev => ({ ...prev, [name]: value }));
};

使用useReducer管理复杂状态

当搜索条件较复杂时，useReducer可能更合适：

react如何写多条件搜索功能

const searchReducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return { ...state, [action.field]: action.value };
    case 'RESET':
      return initialState;
    default:
      return state;
  }
};

const [searchState, dispatch] = useReducer(searchReducer, initialState);

结合防抖优化性能

对于频繁触发的搜索，可添加防抖功能：

import { debounce } from 'lodash';

const debouncedSearch = debounce(searchTerm => {
  // 执行搜索逻辑
}, 300);

const handleSearchChange = (e) => {
  debouncedSearch(e.target.value);
};

使用Context共享搜索状态

当需要在多个组件间共享搜索状态时：

const SearchContext = createContext();

const SearchProvider = ({ children }) => {
  const [searchParams, setSearchParams] = useState({});
  // ...其他逻辑

  return (
    <SearchContext.Provider value={{ searchParams, setSearchParams }}>
      {children}
    </SearchContext.Provider>
  );
};

完整组件示例

function SearchComponent({ data }) {
  const [filters, setFilters] = useState({
    text: '',
    category: '',
    minPrice: '',
    maxPrice: ''
  });

  const handleFilterChange = (e) => {
    const { name, value } = e.target;
    setFilters({ ...filters, [name]: value });
  };

  const filteredItems = data.filter(item => {
    return (
      item.name.toLowerCase().includes(filters.text.toLowerCase()) &&
      (filters.category === '' || item.category === filters.category) &&
      (filters.minPrice === '' || item.price >= Number(filters.minPrice)) &&
      (filters.maxPrice === '' || item.price <= Number(filters.maxPrice))
    );
  });

  return (
    <div>
      <input
        type="text"
        name="text"
        value={filters.text}
        onChange={handleFilterChange}
        placeholder="Search by name"
      />

      <select
        name="category"
        value={filters.category}
        onChange={handleFilterChange}
      >
        <option value="">All Categories</option>
        <option value="electronics">Electronics</option>
        <option value="clothing">Clothing</option>
      </select>

      <input
        type="number"
        name="minPrice"
        value={filters.minPrice}
        onChange={handleFilterChange}
        placeholder="Min price"
      />

      <input
        type="number"
        name="maxPrice"
        value={filters.maxPrice}
        onChange={handleFilterChange}
        placeholder="Max price"
      />

      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name} - ${item.price}</li>
        ))}
      </ul>
    </div>
  );
}