前言
在 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
