前端UI组件设计系统【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址https://gitcode.com/gh_mirrors/ant/ant-design点击查看免费下载本文以 ant-design 仓库中 transfer 搜索演示 及其配套文档 search.md 为核心完整讲解 Transfer 穿梭框「带搜索框 自定义搜索函数」的配置方式如何通过showSearch开启双栏搜索、如何用filterOption自定义匹配逻辑、如何借助onSearch感知搜索行为并结合源码与测试用例剖析其底层实现。读完本文你将能够为穿梭框接入符合业务需求的自定义搜索能力并理解搜索与选中、全选之间的联动机制。演示效果与核心要点官方文档对「带搜索框」这一能力只有两句说明带搜索框的穿梭框可以自定义搜索函数。Transfer with a search box.这短短一句话背后实际包含三块可配置能力开启搜索框通过showSearch属性让左右两栏各自渲染一个搜索框默认关闭值为false自定义搜索函数通过filterOption(inputValue, option, direction)决定某条数据是否命中当前搜索词感知搜索行为通过onSearch(direction, value)回调在用户输入、清空搜索时获得通知。完整可运行的演示代码位于 components/transfer/demo/search.tsx在 Transfer 组件文档 的「代码演示」区域中被引用为「带搜索框」示例。完整示例代码以下是官方 demo 的完整实现已去除注释与仓库 search.tsx 保持一致import React, { useEffect, useState } from react; import { Transfer } from antd; import type { TransferProps } from antd; interface RecordType { key: string; title: string; description: string; chosen: boolean; } const App: React.FC () { const [mockData, setMockData] useStateRecordType[]([]); const [targetKeys, setTargetKeys] useStateTransferProps[targetKeys]([]); const getMock () { const tempTargetKeys []; const tempMockData []; for (let i 0; i 20; i) { const data { key: i.toString(), title: content${i 1}, description: description of content${i 1}, chosen: i % 2 0, }; if (data.chosen) { tempTargetKeys.push(data.key); } tempMockData.push(data); } setMockData(tempMockData); setTargetKeys(tempTargetKeys); }; useEffect(() { getMock(); }, []); const filterOption (inputValue: string, option: RecordType) option.description.indexOf(inputValue) -1; const handleChange: TransferProps[onChange] (newTargetKeys) { setTargetKeys(newTargetKeys); }; const handleSearch: TransferProps[onSearch] (dir, value) { console.log(search:, dir, value); }; return ( Transfer dataSource{mockData} showSearch filterOption{filterOption} targetKeys{targetKeys} onChange{handleChange} onSearch{handleSearch} render{(item) item.title} / ); }; export default App;代码逐段解读1. 数据模型与初始化每条数据包含key唯一标识、title渲染标题、description搜索匹配的辅助字段和chosen是否预置在右侧栏。getMock生成 20 条数据并将偶数下标的数据预置进targetKeys模拟「已有部分选项被选中」的初始状态。这正是 Transfer 的典型受控用法数据源与右侧选中 key 都由 React state 驱动。2. 自定义搜索函数filterOptionconst filterOption (inputValue: string, option: RecordType) option.description.indexOf(inputValue) -1;这是整个示例的核心默认情况下Transfer 的搜索是对render渲染出的文本做大小写不敏感的includes匹配见下文源码分析而这里自定义为对每条数据的description字段做indexOf包含匹配。inputValue为当前搜索词option为dataSource中的每一条记录命中时返回true该条数据保留在列表中否则被过滤。3. 事件回调onChange(newTargetKeys)选项在两栏间移动后用新 key 集合更新受控的targetKeysonSearch(dir, value)用户输入或清空搜索词时触发dir为left | rightvalue为当前搜索值。示例中仅打印日志实际业务可用来埋点或联动外部状态。4. 关键属性一览属性值作用dataSourcemockData全部可选数据左侧栏数据源showSearchtrue简写左右两栏各显示一个搜索框filterOption自定义函数覆盖默认过滤逻辑按description匹配targetKeys受控 state已选中项右侧栏的 key 集合onChange更新targetKeys完成受控转移onSearch打印日志感知搜索行为render(item) item.title每行渲染标题搜索相关 API 精讲依据 Transfer 组件文档 的 API 表格与 index.tsx 类型定义搜索能力由以下三个属性组成showSearch开关与默认值showSearch?: boolean; // 默认 false在 index.tsx 中可以看到默认值showSearch false开启后左右两栏列表头部会各渲染一个带搜索图标的输入框。搜索框内部复用了Input组件并自带allowClear可一键清空与放大镜前缀图标。filterOption自定义筛选函数filterOption?: (inputValue: string, item: RecordType, direction: TransferDirection) boolean;参数inputValue搜索词、item数据源中的一条记录、directionleft | right自 5.9.0 起支持可针对左右栏使用不同匹配策略返回值true保留该条数据false则过滤默认值无。未传时使用内置匹配逻辑见下文「底层实现」。onSearch搜索行为回调onSearch?: (direction: TransferDirection, value: string) void;用户在任一栏搜索框中输入、修改或清空内容时触发。注意它在每次输入变化时都会触发不是防抖后的提交适合做搜索埋点或受控联动。辅助配置locale.searchPlaceholder 与 notFoundContent搜索框占位文案由locale.searchPlaceholder控制默认中文环境为请输入搜索内容当过滤后列表为空时展示notFoundContent默认由DefaultRenderEmpty提供「暂无数据」。两个配置均可在locale属性中按需覆盖Transfer showSearch locale{{ searchPlaceholder: 按名称或描述搜索, notFoundContent: 没有匹配的数据, }} /源码级原理剖析1. 搜索框组件的实现搜索框由独立的 components/transfer/search.tsx 组件渲染其核心逻辑const handleChange React.useCallback( (e: React.ChangeEventHTMLInputElement) { onChange?.(e); if (e.target.value ) { handleClear?.(); } }, [onChange], );可以看到输入框基于Input封装带allowClear与SearchOutlined前缀图标当输入值被清空包含点击清除按钮时会额外调用handleClear用于触发onSearch(direction, )并重置列表状态。2. 过滤链路的传递在 index.tsx 中showSearch、filterOption、onSearch相关处理被同时传给左右两个ListhandleFilter绑定到leftFilter/rightFilter其实现为onSearch?.(left | right, e.target.value)见 index.tsxhandleClear对应onSearch?.(left | right, )两个List各自维护独立的filterValuestate因此左右栏搜索互不干扰。3. 默认匹配逻辑与过滤渲染在 components/transfer/list.tsx 中定义了匹配函数const matchFilter (text: string, item: RecordType) { if (filterOption) { return filterOption(filterValue, item, direction); } return text.includes(filterValue); };传入filterOption时完全交由自定义函数决定render的渲染结果不作为匹配依据未传入时对render渲染出的文本text做includes包含匹配注意这里并未做大小写转换为精确匹配。随后 list.tsx 通过useMemo基于dataSource与filterValue计算filteredItems过滤后的数据与filteredRenderItems过滤后的渲染项过滤结果为空时渲染notFoundContent。此外头部全选框的勾选状态也是基于filteredItems计算的checkStatus为none / part / all意味着搜索状态下全选只作用于过滤后的可见项——这是带搜索穿梭框一个容易被忽略但很实用的联动行为。测试用例佐证仓库测试 components/transfer/tests/search.test.tsx 覆盖了搜索能力的核心行为可作为理解 API 契约的权威参考onSearch 触发在左侧输入框输入a断言onSearch以(left, a)调用点击清除图标后断言以(left, )调用空格触发过滤输入单个空格也会逐条调用filterOption次数等于数据条数回归 issue #26208参数正确性在左侧输入a时filterOption依次收到(a, { key: a, ... }, left)与(a, { key: c, ... }, left)在右侧输入b时收到(b, { key: b, ... }, right)验证了inputValue、option、direction三个参数从左到右的语义。这些断言直接印证了上文对filterOption参数顺序与onSearch回调方向的描述开发者可对照测试理解行为边界。实战建议选择合适的匹配字段示例按description匹配实际业务中可根据render展示的内容决定匹配维度例如同时匹配title与descriptionoption.title.includes(v) || option.description.includes(v)。利用 direction 区分策略5.9.0若左右栏数据结构不同如右侧为已保存项可在filterOption第三个参数中按left | right分支处理。保留受控模式Transfer 仅支持受控模式务必用targetKeysonChange维护选中状态搜索过滤与选中互不影响右侧栏项不会因搜索被误过滤。合理设置 placeholder 与空态通过locale定制搜索占位文案与无结果提示提升在大数据量场景下的可用性。与分页组合开启pagination后4.3.0搜索过滤同样生效但注意pagination与自定义children渲染列表不可同时使用源码中会给出 warning见 index.tsx。小结Transfer 的搜索能力由「开关showSearch 自定义匹配filterOption 行为回调onSearch」三位一体构成showSearch决定两栏是否出现搜索框filterOption决定命中规则onSearch提供输入事件感知。其底层在 list.tsx 中按栏维护过滤状态、基于过滤结果联动全选与空态并通过 search.tsx 复用Input完成输入交互。如需深入更多场景表格穿梭框、树穿梭框、大数据分页等可继续阅读 Transfer 组件文档 中的其他演示代码。赞分享前端UI组件设计系统【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址https://gitcode.com/gh_mirrors/ant/ant-design点击查看免费下载相关推荐ant-design Transfer 穿梭框搜索功能实战showSearch 开启数据筛选与源码解析ant design Transfer 穿梭框搜索功能实战showSearch 开启数据筛选与源码解析 本指南围绕 ant design 的 带搜索框穿梭框示UI组件前端设计系统Ant Design Transfer 树穿梭框实战用 Tree 组件自定义渲染穿梭列表Ant Design Transfer 树穿梭框实战用 Tree 组件自定义渲染穿梭列表 导读 穿梭框Transfer通常以平铺列表展示可选项但在组织前端UI组件设计系统ant-design-blazor穿梭框组件实战Transfer用法ant design blazor穿梭框组件实战Transfer用法 1. 引言解决数据交互的核心痛点 你是否还在为Blazor应用中实现左右列表数据迁移功UI组件前端上一篇Python金融数据接口实战指南三分钟掌握通达信A股数据获取下一篇darktable批处理脚本自动化工作流程设计创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Ant Design Transfer 穿梭框带搜索框详解：showSearch 与自定义 filterOption 实战
前端UI组件设计系统【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址https://gitcode.com/gh_mirrors/ant/ant-design点击查看免费下载本文以 ant-design 仓库中 transfer 搜索演示 及其配套文档 search.md 为核心完整讲解 Transfer 穿梭框「带搜索框 自定义搜索函数」的配置方式如何通过showSearch开启双栏搜索、如何用filterOption自定义匹配逻辑、如何借助onSearch感知搜索行为并结合源码与测试用例剖析其底层实现。读完本文你将能够为穿梭框接入符合业务需求的自定义搜索能力并理解搜索与选中、全选之间的联动机制。演示效果与核心要点官方文档对「带搜索框」这一能力只有两句说明带搜索框的穿梭框可以自定义搜索函数。Transfer with a search box.这短短一句话背后实际包含三块可配置能力开启搜索框通过showSearch属性让左右两栏各自渲染一个搜索框默认关闭值为false自定义搜索函数通过filterOption(inputValue, option, direction)决定某条数据是否命中当前搜索词感知搜索行为通过onSearch(direction, value)回调在用户输入、清空搜索时获得通知。完整可运行的演示代码位于 components/transfer/demo/search.tsx在 Transfer 组件文档 的「代码演示」区域中被引用为「带搜索框」示例。完整示例代码以下是官方 demo 的完整实现已去除注释与仓库 search.tsx 保持一致import React, { useEffect, useState } from react; import { Transfer } from antd; import type { TransferProps } from antd; interface RecordType { key: string; title: string; description: string; chosen: boolean; } const App: React.FC () { const [mockData, setMockData] useStateRecordType[]([]); const [targetKeys, setTargetKeys] useStateTransferProps[targetKeys]([]); const getMock () { const tempTargetKeys []; const tempMockData []; for (let i 0; i 20; i) { const data { key: i.toString(), title: content${i 1}, description: description of content${i 1}, chosen: i % 2 0, }; if (data.chosen) { tempTargetKeys.push(data.key); } tempMockData.push(data); } setMockData(tempMockData); setTargetKeys(tempTargetKeys); }; useEffect(() { getMock(); }, []); const filterOption (inputValue: string, option: RecordType) option.description.indexOf(inputValue) -1; const handleChange: TransferProps[onChange] (newTargetKeys) { setTargetKeys(newTargetKeys); }; const handleSearch: TransferProps[onSearch] (dir, value) { console.log(search:, dir, value); }; return ( Transfer dataSource{mockData} showSearch filterOption{filterOption} targetKeys{targetKeys} onChange{handleChange} onSearch{handleSearch} render{(item) item.title} / ); }; export default App;代码逐段解读1. 数据模型与初始化每条数据包含key唯一标识、title渲染标题、description搜索匹配的辅助字段和chosen是否预置在右侧栏。getMock生成 20 条数据并将偶数下标的数据预置进targetKeys模拟「已有部分选项被选中」的初始状态。这正是 Transfer 的典型受控用法数据源与右侧选中 key 都由 React state 驱动。2. 自定义搜索函数filterOptionconst filterOption (inputValue: string, option: RecordType) option.description.indexOf(inputValue) -1;这是整个示例的核心默认情况下Transfer 的搜索是对render渲染出的文本做大小写不敏感的includes匹配见下文源码分析而这里自定义为对每条数据的description字段做indexOf包含匹配。inputValue为当前搜索词option为dataSource中的每一条记录命中时返回true该条数据保留在列表中否则被过滤。3. 事件回调onChange(newTargetKeys)选项在两栏间移动后用新 key 集合更新受控的targetKeysonSearch(dir, value)用户输入或清空搜索词时触发dir为left | rightvalue为当前搜索值。示例中仅打印日志实际业务可用来埋点或联动外部状态。4. 关键属性一览属性值作用dataSourcemockData全部可选数据左侧栏数据源showSearchtrue简写左右两栏各显示一个搜索框filterOption自定义函数覆盖默认过滤逻辑按description匹配targetKeys受控 state已选中项右侧栏的 key 集合onChange更新targetKeys完成受控转移onSearch打印日志感知搜索行为render(item) item.title每行渲染标题搜索相关 API 精讲依据 Transfer 组件文档 的 API 表格与 index.tsx 类型定义搜索能力由以下三个属性组成showSearch开关与默认值showSearch?: boolean; // 默认 false在 index.tsx 中可以看到默认值showSearch false开启后左右两栏列表头部会各渲染一个带搜索图标的输入框。搜索框内部复用了Input组件并自带allowClear可一键清空与放大镜前缀图标。filterOption自定义筛选函数filterOption?: (inputValue: string, item: RecordType, direction: TransferDirection) boolean;参数inputValue搜索词、item数据源中的一条记录、directionleft | right自 5.9.0 起支持可针对左右栏使用不同匹配策略返回值true保留该条数据false则过滤默认值无。未传时使用内置匹配逻辑见下文「底层实现」。onSearch搜索行为回调onSearch?: (direction: TransferDirection, value: string) void;用户在任一栏搜索框中输入、修改或清空内容时触发。注意它在每次输入变化时都会触发不是防抖后的提交适合做搜索埋点或受控联动。辅助配置locale.searchPlaceholder 与 notFoundContent搜索框占位文案由locale.searchPlaceholder控制默认中文环境为请输入搜索内容当过滤后列表为空时展示notFoundContent默认由DefaultRenderEmpty提供「暂无数据」。两个配置均可在locale属性中按需覆盖Transfer showSearch locale{{ searchPlaceholder: 按名称或描述搜索, notFoundContent: 没有匹配的数据, }} /源码级原理剖析1. 搜索框组件的实现搜索框由独立的 components/transfer/search.tsx 组件渲染其核心逻辑const handleChange React.useCallback( (e: React.ChangeEventHTMLInputElement) { onChange?.(e); if (e.target.value ) { handleClear?.(); } }, [onChange], );可以看到输入框基于Input封装带allowClear与SearchOutlined前缀图标当输入值被清空包含点击清除按钮时会额外调用handleClear用于触发onSearch(direction, )并重置列表状态。2. 过滤链路的传递在 index.tsx 中showSearch、filterOption、onSearch相关处理被同时传给左右两个ListhandleFilter绑定到leftFilter/rightFilter其实现为onSearch?.(left | right, e.target.value)见 index.tsxhandleClear对应onSearch?.(left | right, )两个List各自维护独立的filterValuestate因此左右栏搜索互不干扰。3. 默认匹配逻辑与过滤渲染在 components/transfer/list.tsx 中定义了匹配函数const matchFilter (text: string, item: RecordType) { if (filterOption) { return filterOption(filterValue, item, direction); } return text.includes(filterValue); };传入filterOption时完全交由自定义函数决定render的渲染结果不作为匹配依据未传入时对render渲染出的文本text做includes包含匹配注意这里并未做大小写转换为精确匹配。随后 list.tsx 通过useMemo基于dataSource与filterValue计算filteredItems过滤后的数据与filteredRenderItems过滤后的渲染项过滤结果为空时渲染notFoundContent。此外头部全选框的勾选状态也是基于filteredItems计算的checkStatus为none / part / all意味着搜索状态下全选只作用于过滤后的可见项——这是带搜索穿梭框一个容易被忽略但很实用的联动行为。测试用例佐证仓库测试 components/transfer/tests/search.test.tsx 覆盖了搜索能力的核心行为可作为理解 API 契约的权威参考onSearch 触发在左侧输入框输入a断言onSearch以(left, a)调用点击清除图标后断言以(left, )调用空格触发过滤输入单个空格也会逐条调用filterOption次数等于数据条数回归 issue #26208参数正确性在左侧输入a时filterOption依次收到(a, { key: a, ... }, left)与(a, { key: c, ... }, left)在右侧输入b时收到(b, { key: b, ... }, right)验证了inputValue、option、direction三个参数从左到右的语义。这些断言直接印证了上文对filterOption参数顺序与onSearch回调方向的描述开发者可对照测试理解行为边界。实战建议选择合适的匹配字段示例按description匹配实际业务中可根据render展示的内容决定匹配维度例如同时匹配title与descriptionoption.title.includes(v) || option.description.includes(v)。利用 direction 区分策略5.9.0若左右栏数据结构不同如右侧为已保存项可在filterOption第三个参数中按left | right分支处理。保留受控模式Transfer 仅支持受控模式务必用targetKeysonChange维护选中状态搜索过滤与选中互不影响右侧栏项不会因搜索被误过滤。合理设置 placeholder 与空态通过locale定制搜索占位文案与无结果提示提升在大数据量场景下的可用性。与分页组合开启pagination后4.3.0搜索过滤同样生效但注意pagination与自定义children渲染列表不可同时使用源码中会给出 warning见 index.tsx。小结Transfer 的搜索能力由「开关showSearch 自定义匹配filterOption 行为回调onSearch」三位一体构成showSearch决定两栏是否出现搜索框filterOption决定命中规则onSearch提供输入事件感知。其底层在 list.tsx 中按栏维护过滤状态、基于过滤结果联动全选与空态并通过 search.tsx 复用Input完成输入交互。如需深入更多场景表格穿梭框、树穿梭框、大数据分页等可继续阅读 Transfer 组件文档 中的其他演示代码。赞分享前端UI组件设计系统【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址https://gitcode.com/gh_mirrors/ant/ant-design点击查看免费下载相关推荐ant-design Transfer 穿梭框搜索功能实战showSearch 开启数据筛选与源码解析ant design Transfer 穿梭框搜索功能实战showSearch 开启数据筛选与源码解析 本指南围绕 ant design 的 带搜索框穿梭框示UI组件前端设计系统Ant Design Transfer 树穿梭框实战用 Tree 组件自定义渲染穿梭列表Ant Design Transfer 树穿梭框实战用 Tree 组件自定义渲染穿梭列表 导读 穿梭框Transfer通常以平铺列表展示可选项但在组织前端UI组件设计系统ant-design-blazor穿梭框组件实战Transfer用法ant design blazor穿梭框组件实战Transfer用法 1. 引言解决数据交互的核心痛点 你是否还在为Blazor应用中实现左右列表数据迁移功UI组件前端上一篇Python金融数据接口实战指南三分钟掌握通达信A股数据获取下一篇darktable批处理脚本自动化工作流程设计创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考