React + Antd 开发实战之搜索框组件封装-JavaScript中文网-JavaScript教程资源分享门户

前言

在 Web 开发中，搜索框是非常常见的元素，往往需要在多个页面重复构建。如果每个页面都独立开发搜索框，无疑会浪费大量时间和精力。因此，封装一个搜索框组件是很有必要的，它可以避免重复的代码和提高代码的复用性。

本文将介绍如何使用 React 和 Antd 封装一个公共的搜索框组件，使得在项目中各个页面都可以调用该组件，并且通过传递不同的参数实现不同的搜索功能。

组件开发

需求分析

在开始开发前，我们需要明确组件的需求和功能。一个标准的搜索框通常具备以下基础功能：

输入查询关键词。
提交查询。
支持异步请求。
支持查询条件的配置。

组件封装

接下来，我们将使用 React 和 Antd 来开发一个搜索框组件，具体步骤如下：

1. 安装 Antd

使用 yarn 或 npm 安装 Antd 库。

yarn add antd
# 或
npm install antd --save

2. 创建 SearchBox 组件

创建一个名为 SearchBox 的组件，编写基础代码。

import React from 'react';
import { Input, Button } from 'antd';

const SearchBox = () => {
  const [keyword, setKeyword] = useState('');

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

  const handleSearchClick = () => {
    console.log('search', keyword);
  };

  return (
    <div>
      <Input.Search
        placeholder="请输入关键字"
        allowClear
        enterButton="搜索"
        size="large"
        value={keyword}
        onChange={handleInputChange}
        onSearch={handleSearchClick}
      />
    </div>
  );
};

export default SearchBox;

上述代码中， SearchBox 组件包含了一个搜索框和一个搜索按钮，可以接收输入的关键词并提交查询。

3. 支持异步请求

通常，在实际业务中，我们需要通过异步请求获取查询结果。因此，我们需要添加一个异步请求的函数来处理查询操作，并且增加一个加载状态的处理。

import React, { useState } from 'react';
import { Input, Button, Spin } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';

const SearchBox = ({ onSearch }) => {
  const [keyword, setKeyword] = useState('');
  const [loading, setLoading] = useState(false);

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

  const handleSearchClick = async () => {
    setLoading(true);
    await onSearch(keyword);
    setLoading(false);
  };

  const suffix = loading ? (
    <Spin indicator={<LoadingOutlined spin />} />
  ) : null;

  return (
    <div>
      <Input.Search
        placeholder="请输入关键字"
        allowClear
        enterButton="搜索"
        size="large"
        value={keyword}
        onChange={handleInputChange}
        onSearch={handleSearchClick}
        suffix={suffix}
      />
    </div>
  );
};

export default SearchBox;

在上述代码中，我们给 SearchBox 组件增加了一个 onSearch 方法，它用于异步查询数据。同时，我们使用了 Spin 组件来展示加载状态。

4. 支持查询条件的配置

在实际业务中，一个搜索框可能需要支持多种不同的查询条件。因此，我们需要增加一个查询条件的下拉框，并且提供一个参数来配置查询条件。

import React, { useState } from 'react';
import { Input, Button, Spin, Select } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';

const { Option } = Select;

const SearchBox = ({ onSearch, options }) => {
  const [keyword, setKeyword] = useState('');
  const [loading, setLoading] = useState(false);
  const [condition, setCondition] = useState(options[0]);

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

  const handleConditionChange = (value) => {
    setCondition(value);
  };

  const handleSearchClick = async () => {
    setLoading(true);
    await onSearch({ keyword, condition });
    setLoading(false);
  };

  const suffix = loading ? (
    <Spin indicator={<LoadingOutlined spin />} />
  ) : null;

  return (
    <div>
      <Input.Search
        placeholder="请输入关键字"
        allowClear
        enterButton="搜索"
        size="large"
        value={keyword}
        onChange={handleInputChange}
        onSearch={handleSearchClick}
        suffix={suffix}
      />
      <Select
        style={{ width: 120, marginLeft: 10 }}
        value={condition}
        onChange={handleConditionChange}
      >
        {options.map((option) => (
          <Option key={option.value} value={option.value}>
            {option.label}
          </Option>
        ))}
      </Select>
    </div>
  );
};

export default SearchBox;

在上述代码中，我们增加了一个 options 参数来配置查询条件，在组件中创建了一个下拉框选择器，并且支持了在查询时附加查询条件的功能。

使用示例

标准使用

在一个使用场景中，我们可以这样调用 SearchBox 组件：

<SearchBox
  options={[
    { label: '按名称查询', value: 'name' },
    { label: '按 ID 查询', value: 'id' },
  ]}
  onSearch={handleSearch}
/>

handleSearch 是一个异步查询函数，它可以获取到用户输入的关键字和查询条件，并且进行查询操作。

在 Table 中使用

在表格展示数据时，我们通常需要将数据和搜索框结合起来。因此，我们需要将 SearchBox 组件放在 Table 组件中。

import React, { useState } from 'react';
import { Table, message } from 'antd';
import SearchBox from './SearchBox';

const dataSource = [
  {
    id: 1,
    name: '苹果',
    price: 4.99,
    count: 100,
  },
  {
    id: 2,
    name: '西瓜',
    price: 3.99,
    count: 50,
  },
  {
    id: 3,
    name: '香蕉',
    price: 2.99,
    count: 200,
  },
  {
    id: 4,
    name: '梨子',
    price: 1.99,
    count: 150,
  },
];

const columns = [
  { title: 'ID', dataIndex: 'id' },
  { title: '商品名称', dataIndex: 'name' },
  { title: '单价', dataIndex: 'price' },
  { title: '库存', dataIndex: 'count' },
];

const App = () => {
  const [filteredData, setFilteredData] = useState(dataSource);

  const handleSearch = async ({ keyword, condition }) => {
    try {
      const filtered = await fetch('/api/products', {
        method: 'POST',
        body: {
          keyword,
          condition,
        },
      });
      setFilteredData(filtered);
    } catch (error) {
      message.error('查询失败');
    }
  };

  return (
    <div>
      <SearchBox
        options={[
          { label: '按名称查询', value: 'name' },
          { label: '按 ID 查询', value: 'id' },
        ]}
        onSearch={handleSearch}
      />
      <Table dataSource={filteredData} columns={columns} />
    </div>
  );
};

export default App;

在上述代码中，我们定义了 dataSource 和 columns，并且增加了一个名为 filteredData 的状态变量来存储过滤后的数据。在 handleSearch 函数中，我们通过异步请求来获取数据，并且更新 filteredData 状态变量。最后，将 filteredData 作为数据源放到表格中展示即可。

总结

本文介绍了如何通过 React 和 Antd 封装一个通用的搜索框组件。我们通过定义搜索框的需求和功能，编写了一个具有异步请求和查询条件配置的搜索框组件，并且提供了示例代码展示了如何在表格中使用该组件。组件的封装，可以提高代码的复用性和开发效率，是一种很好的编程实践手段。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a0ea15add4f0e0ff9187f8

React + Antd 开发实战之搜索框组件封装

前言