前言
在 Web 开发中，搜索框是非常常见的元素，往往需要在多个页面重复构建。如果每个页面都独立开发搜索框，无疑会浪费大量时间和精力。因此，封装一个搜索框组件是很有必要的，它可以避免重复的代码和提高代码的复用性。
本文将介绍如何使用 React 和 Antd 封装一个公共的搜索框组件，使得在项目中各个页面都可以调用该组件，并且通过传递不同的参数实现不同的搜索功能。
组件开发
需求分析
在开始开发前，我们需要明确组件的需求和功能。一个标准的搜索框通常具备以下基础功能：
- 输入查询关键词。
- 提交查询。
- 支持异步请求。
- 支持查询条件的配置。
组件封装
接下来，我们将使用 React 和 Antd 来开发一个搜索框组件，具体步骤如下：
1. 安装 Antd
使用 yarn 或 npm 安装 Antd 库。
yarn add antd # 或 npm install antd --save
2. 创建 SearchBox 组件
创建一个名为 SearchBox 的组件，编写基础代码。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ------ - ---- -------
----- --------- - -- -- -
----- --------- ----------- - -------------
----- ----------------- - --- -- -
---------------------------
--
----- ----------------- - -- -- -
--------------------- ---------
--
------ -
-----
-------------
--------------------
----------
----------------
------------
---------------
----------------------------
----------------------------
--
------
--
--
------ ------- ----------上述代码中， SearchBox 组件包含了一个搜索框和一个搜索按钮，可以接收输入的关键词并提交查询。
3. 支持异步请求
通常，在实际业务中，我们需要通过异步请求获取查询结果。因此，我们需要添加一个异步请求的函数来处理查询操作，并且增加一个加载状态的处理。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------ ------- ---- - ---- -------
------ - --------------- - ---- --------------------
----- --------- - -- -------- -- -- -
----- --------- ----------- - -------------
----- --------- ----------- - ----------------
----- ----------------- - --- -- -
---------------------------
--
----- ----------------- - ----- -- -- -
-----------------
----- ------------------
------------------
--
----- ------ - ------- - -
----- --------------------------- ---- --- --
- - -----
------ -
-----
-------------
--------------------
----------
----------------
------------
---------------
----------------------------
----------------------------
---------------
--
------
--
--
------ ------- ----------在上述代码中，我们给 SearchBox 组件增加了一个 onSearch 方法，它用于异步查询数据。同时，我们使用了 Spin 组件来展示加载状态。
4. 支持查询条件的配置
在实际业务中，一个搜索框可能需要支持多种不同的查询条件。因此，我们需要增加一个查询条件的下拉框，并且提供一个参数来配置查询条件。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------ ------- ----- ------ - ---- -------
------ - --------------- - ---- --------------------
----- - ------ - - -------
----- --------- - -- --------- ------- -- -- -
----- --------- ----------- - -------------
----- --------- ----------- - ----------------
----- ----------- ------------- - ---------------------
----- ----------------- - --- -- -
---------------------------
--
----- --------------------- - ------- -- -
--------------------
--
----- ----------------- - ----- -- -- -
-----------------
----- ---------- -------- --------- ---
------------------
--
----- ------ - ------- - -
----- --------------------------- ---- --- --
- - -----
------ -
-----
-------------
--------------------
----------
----------------
------------
---------------
----------------------------
----------------------------
---------------
--
-------
-------- ------ ---- ----------- -- --
-----------------
--------------------------------
-
--------------------- -- -
------- ------------------ ---------------------
--------------
---------
---
---------
------
--
--
------ ------- ----------在上述代码中，我们增加了一个 options 参数来配置查询条件，在组件中创建了一个下拉框选择器，并且支持了在查询时附加查询条件的功能。
使用示例
标准使用
在一个使用场景中，我们可以这样调用 SearchBox 组件：
<SearchBox
options={[
{ label: '按名称查询', value: 'name' },
{ label: '按 ID 查询', value: 'id' },
]}
onSearch={handleSearch}
/>handleSearch 是一个异步查询函数，它可以获取到用户输入的关键字和查询条件，并且进行查询操作。
在 Table 中使用
在表格展示数据时，我们通常需要将数据和搜索框结合起来。因此，我们需要将 SearchBox 组件放在 Table 组件中。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------ ------- - ---- -------
------ --------- ---- --------------
----- ---------- - -
-
--- --
----- -----
------ -----
------ ----
--
-
--- --
----- -----
------ -----
------ ---
--
-
--- --
----- -----
------ -----
------ ----
--
-
--- --
----- -----
------ -----
------ ----
--
--
----- ------- - -
- ------ ----- ---------- ---- --
- ------ ------- ---------- ------ --
- ------ ----- ---------- ------- --
- ------ ----- ---------- ------- --
--
----- --- - -- -- -
----- -------------- ---------------- - ---------------------
----- ------------ - ----- -- -------- --------- -- -- -
--- -
----- -------- - ----- ---------------------- -
------- -------
----- -
--------
----------
--
---
--------------------------
- ----- ------- -
----------------------
-
--
------ -
-----
----------
----------
- ------ -------- ------ ------ --
- ------ -- -- ---- ------ ---- --
--
-----------------------
--
------ ------------------------- ----------------- --
------
--
--
------ ------- ----在上述代码中，我们定义了 dataSource 和 columns，并且增加了一个名为 filteredData 的状态变量来存储过滤后的数据。在 handleSearch 函数中，我们通过异步请求来获取数据，并且更新 filteredData 状态变量。最后，将 filteredData 作为数据源放到表格中展示即可。
总结
本文介绍了如何通过 React 和 Antd 封装一个通用的搜索框组件。我们通过定义搜索框的需求和功能，编写了一个具有异步请求和查询条件配置的搜索框组件，并且提供了示例代码展示了如何在表格中使用该组件。组件的封装，可以提高代码的复用性和开发效率，是一种很好的编程实践手段。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a0ea15add4f0e0ff9187f8