当前位置：首页 > React

react实现搜索跳转

2026-01-27 02:28:24React

React 实现搜索跳转

在 React 中实现搜索跳转功能通常涉及以下几个步骤：

创建搜索输入组件
使用 useState 管理搜索输入的值，监听输入框的变化并更新状态。

react实现搜索跳转

import React, { useState } from 'react';

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

  const handleInputChange = (e) => {
    setSearchTerm(e.target.value);
  };

  return (
    <input
      type="text"
      value={searchTerm}
      onChange={handleInputChange}
      placeholder="Search..."
    />
  );
}

处理搜索提交
通过 useNavigate（React Router v6）或 history.push（React Router v5）实现页面跳转。

react实现搜索跳转

import { useNavigate } from 'react-router-dom';

function SearchBar() {
  const [searchTerm, setSearchTerm] = useState('');
  const navigate = useNavigate();

  const handleSearch = (e) => {
    e.preventDefault();
    navigate(`/search?q=${encodeURIComponent(searchTerm)}`);
  };

  return (
    <form onSubmit={handleSearch}>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search..."
      />
      <button type="submit">Search</button>
    </form>
  );
}

在目标页面解析搜索参数
使用 useSearchParams（React Router v6）或 URLSearchParams 解析 URL 参数。

import { useSearchParams } from 'react-router-dom';

function SearchResults() {
  const [searchParams] = useSearchParams();
  const query = searchParams.get('q');

  return (
    <div>
      <h1>Search Results for: {query}</h1>
      {/* 渲染搜索结果 */}
    </div>
  );
}

优化用户体验
可以添加防抖（debounce）或实时搜索功能，减少不必要的跳转请求。

import { debounce } from 'lodash';

const handleSearch = debounce((term) => {
  navigate(`/search?q=${encodeURIComponent(term)}`);
}, 500);

const handleInputChange = (e) => {
  const term = e.target.value;
  setSearchTerm(term);
  handleSearch(term);
};

通过以上方法，可以高效实现 React 中的搜索跳转功能，同时兼顾用户体验和代码可维护性。