实现react搜索框

实现React搜索框的方法

基础搜索框实现

使用React的useState和onChange事件可以实现基础搜索功能：

import React, { useState } from 'react';

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

  const handleChange = (event) => {
    setSearchTerm(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={searchTerm}
        onChange={handleChange}
      />
      <p>Searching for: {searchTerm}</p>
    </div>
  );
}

防抖优化

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

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

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

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

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

  return (
    <div>
      <input
        type="text"
        placeholder="Search with debounce..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <p>Debounced search: {debouncedTerm}</p>
    </div>
  );
}

搜索API数据

结合异步请求实现实时搜索：

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

function ApiSearch() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      if (query.length > 2) {
        const response = await axios.get(
          `https://api.example.com/search?q=${query}`
        );
        setResults(response.data);
      }
    };

    const timerId = setTimeout(fetchData, 300);
    return () => clearTimeout(timerId);
  }, [query]);

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search API..."
      />
      <ul>
        {results.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

样式优化

添加CSS样式增强用户体验：

.search-container {
  margin: 20px;
}

.search-input {
  padding: 10px;
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.search-input:focus {
  outline: none;
  border-color: #4d90fe;
  box-shadow: 0 0 5px rgba(77, 144, 254, 0.5);
}

.search-results {
  margin-top: 10px;
  list-style: none;
  padding: 0;
}

.search-results li {
  padding: 8px;
  border-bottom: 1px solid #eee;
}

高级功能扩展

实现搜索历史记录功能：

function SearchWithHistory() {
  const [query, setQuery] = useState('');
  const [history, setHistory] = useState([]);

  const handleSearch = () => {
    if (query && !history.includes(query)) {
      setHistory([...history, query]);
    }
    // 执行搜索逻辑
  };

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
      />
      <button onClick={handleSearch}>Search</button>

      <div>
        <h4>Search History</h4>
        <ul>
          {history.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}