当前位置：首页 > React

react加antd实现搜索

2026-01-27 20:04:14React

使用React和Ant Design实现搜索功能

在React项目中结合Ant Design组件库实现搜索功能，主要涉及Input.Search组件的使用以及状态管理。以下是具体实现方式：

基础搜索框实现

安装Ant Design后，引入Input组件并设置搜索框基础样式：

react加antd实现搜索

import { Input } from 'antd';
const { Search } = Input;

function BasicSearch() {
  const handleSearch = (value) => {
    console.log('搜索关键词:', value);
    // 这里添加搜索逻辑
  };

  return (
    <Search
      placeholder="输入搜索内容"
      allowClear
      enterButton="搜索"
      size="large"
      onSearch={handleSearch}
    />
  );
}

结合状态管理实现实时搜索

通过useState管理搜索词，配合onChange实现实时搜索：

react加antd实现搜索

import { useState } from 'react';
import { Input } from 'antd';

function RealTimeSearch() {
  const [searchText, setSearchText] = useState('');

  const handleChange = (e) => {
    setSearchText(e.target.value);
    // 可在此处添加防抖逻辑
  };

  return (
    <Input.Search
      value={searchText}
      onChange={handleChange}
      placeholder="实时搜索..."
    />
  );
}

表格数据搜索过滤

结合Ant Design的Table组件实现数据过滤：

import { Table, Input } from 'antd';
import { useState } from 'react';

function SearchTable() {
  const [data, setData] = useState(/* 初始数据 */);
  const [filteredData, setFilteredData] = useState(data);

  const handleSearch = (value) => {
    const filtered = data.filter(item => 
      item.name.toLowerCase().includes(value.toLowerCase())
    );
    setFilteredData(filtered);
  };

  return (
    <>
      <Input.Search 
        onSearch={handleSearch} 
        style={{ width: 200, marginBottom: 16 }} 
      />
      <Table dataSource={filteredData} columns={/* 列配置 */} />
    </>
  );
}

高级搜索表单

使用Form组件构建多条件搜索：

import { Form, Input, Button } from 'antd';

function AdvancedSearch() {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('搜索条件:', values);
    // 执行搜索逻辑
  };

  return (
    <Form form={form} onFinish={onFinish} layout="inline">
      <Form.Item name="keyword" label="关键词">
        <Input />
      </Form.Item>
      <Form.Item name="category" label="分类">
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">搜索</Button>
      </Form.Item>
    </Form>
  );
}

性能优化建议

对高频输入的搜索框添加防抖处理
大数据量时考虑分页加载
复杂搜索条件可结合后端接口实现

import { debounce } from 'lodash';

const debouncedSearch = debounce((value) => {
  // 实际搜索逻辑
}, 500);

<Input.Search onChange={e => debouncedSearch(e.target.value)} />

以上方案可根据实际需求组合使用，Ant Design的搜索组件支持多种样式定制和事件处理，能够满足大多数业务场景。