使用react实现input搜索

实现React Input搜索功能

在React中实现一个输入框搜索功能，通常需要结合状态管理和事件处理。以下是一个完整的实现方案：

基础实现

创建一个受控组件来管理输入状态：

import React, { useState } from 'react';

function SearchInput() {
  const [searchTerm, setSearchTerm] = useState('');

  const handleSearch = (e) => {
    setSearchTerm(e.target.value);
    // 这里可以添加搜索逻辑或API调用
  };

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={handleSearch}
        placeholder="搜索..."
      />
    </div>
  );
}

export default SearchInput;

添加防抖优化

为防止频繁触发搜索请求，可以使用防抖技术：

import React, { useState, useEffect } from 'react';

function DebouncedSearchInput() {
  const [searchTerm, setSearchTerm] = useState('');
  const [debouncedTerm, setDebouncedTerm] = useState('');

  useEffect(() => {
    const timerId = setTimeout(() => {
      setDebouncedTerm(searchTerm);
    }, 500);

    return () => {
      clearTimeout(timerId);
    };
  }, [searchTerm]);

  useEffect(() => {
    if (debouncedTerm) {
      // 执行搜索逻辑
      console.log('搜索:', debouncedTerm);
    }
  }, [debouncedTerm]);

  return (
    <input
      type="text"
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
      placeholder="搜索..."
    />
  );
}

完整搜索组件示例

结合搜索结果展示的完整组件：

import React, { useState, useEffect } from 'react';

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isSearching, setIsSearching] = useState(false);

  const searchItems = async (searchTerm) => {
    if (!searchTerm) {
      setResults([]);
      return;
    }

    setIsSearching(true);
    try {
      // 这里替换为实际的API调用
      const response = await fetch(`/api/search?q=${searchTerm}`);
      const data = await response.json();
      setResults(data);
    } catch (error) {
      console.error('搜索出错:', error);
    } finally {
      setIsSearching(false);
    }
  };

  useEffect(() => {
    const timerId = setTimeout(() => {
      searchItems(query);
    }, 500);

    return () => {
      clearTimeout(timerId);
    };
  }, [query]);

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="搜索..."
      />

      {isSearching && <div>搜索中...</div>}

      <ul>
        {results.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

使用自定义Hook封装

可以将搜索逻辑封装为自定义Hook以便复用：

import { useState, useEffect } from 'react';

function useSearch(searchFunction, delay = 500) {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState(null);
  const [isSearching, setIsSearching] = useState(false);

  useEffect(() => {
    const handler = setTimeout(() => {
      if (query.trim()) {
        setIsSearching(true);
        searchFunction(query)
          .then(setResults)
          .finally(() => setIsSearching(false));
      } else {
        setResults(null);
      }
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [query, searchFunction, delay]);

  return [query, setQuery, results, isSearching];
}

// 使用示例
function SearchComponent() {
  const [query, setQuery, results, isSearching] = useSearch(async (q) => {
    const response = await fetch(`/api/search?q=${q}`);
    return response.json();
  });

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="搜索..."
      />
      {/* 渲染结果 */}
    </div>
  );
}

这些实现方案涵盖了从基础到高级的React搜索输入功能，可以根据具体需求选择适合的方案或进行组合使用。