Ant Design AutoComplete 状态属性实战用 status 实现 error / warning 校验态【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-designAutoComplete自动完成是 Ant Design 数据录入组件中一个可自由输入并附带建议选项的文本输入框。本文将聚焦status属性讲解如何为 AutoComplete 设置error错误与warning警告两种校验状态并结合仓库源码AutoComplete 实现、Select 底层渲染 与 statusUtils 工具剖析其内部原理、与 Form 表单校验状态的合并规则以及对应样式类名帮助你在表单校验、实时输入反馈等场景中快速落地。一、status 属性是什么status用于为 AutoComplete 输入框设置校验状态目前支持两个取值取值说明error错误状态输入框呈现红色警示样式warning警告状态输入框呈现黄色提示样式该属性自4.19.0版本起提供类型定义为error | warning默认值为-即不设置。在 AutoCompleteProps 接口 中status?: InputStatus与popupClassName、options等属性并列且 AutoComplete 的status并未单独实现而是通过继承 Select 组件的内部属性InternalSelectProps透传获得。二、完整演示error 与 warning 两种状态官方演示 status.tsx 在同一页面内并排渲染了两个 AutoComplete分别设置statuserror与statuswarningimport React, { useState } from react; import { AutoComplete, Space } from antd; import type { AutoCompleteProps } from antd; const mockVal (str: string, repeat 1) ({ value: str.repeat(repeat), }); const App: React.FC () { const [options, setOptions] useStateAutoCompleteProps[options]([]); const [anotherOptions, setAnotherOptions] useStateAutoCompleteProps[options]([]); const getPanelValue (searchText: string) !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)]; return ( Space directionvertical style{{ width: 100% }} AutoComplete options{options} onSearch{(text) setOptions(getPanelValue(text))} statuserror style{{ width: 200 }} / AutoComplete options{anotherOptions} onSearch{(text) setAnotherOptions(getPanelValue(text))} statuswarning style{{ width: 200 }} / /Space ); }; export default App;要点说明options通过onSearch回调动态生成getPanelValue利用str.repeat(repeat)构造 搜索词、搜索词×2、搜索词×3 三组候选值实现输入即出提示的效果。status直接以 props 形式传入配合style{{ width: 200 }}控制输入框宽度。两个示例用Space directionvertical纵向排列便于直观对比 error 与 warning 的视觉差异。如果你只需要基础用法可参考 basic.tsx不传status时组件保持默认态并通过value、onChange、onSelect、placeholder实现受控输入。三、底层原理status 如何透传到 Select 并生成样式类3.1 AutoComplete 只是 Select 的封装从 index.tsx 可以看到AutoComplete 内部最终渲染的是 Select 组件并做三件事通过{...omit(props, [dataSource, dropdownClassName])}将除遗留属性外的所有 props包括status原样透传给 Select设置mode{Select.SECRET_COMBOBOX_MODE_DO_NOT_USE}将 Select 强制切到 combobox可自由输入模式传入prefixCls{getPrefixCls(select, customizePrefixCls)}即 AutoComplete 复用了ant-select前缀的样式体系。因此status的样式渲染链路完全由 Select 承担。3.2 Select 中的状态合并逻辑在 Select 组件 中状态处理如下const { status: contextStatus, hasFeedback, isFormItemInput, feedbackIcon, } React.useContext(FormItemInputContext); const mergedStatus getMergedStatus(contextStatus, customStatus);其中customStatus来自你在 props 上显式传入的statuscontextStatus来自 Form.Item 通过FormItemInputContext注入的校验状态。合并规则定义在 statusUtils.tsexport const getMergedStatus (contextStatus?: ValidateStatus, customStatus?: InputStatus) customStatus || contextStatus;这意味着一句关键的优先级规则显式传入的status优先级高于 Form 上下文中的校验状态。当两者同时存在时以显式传入值为准。3.3 状态样式类的生成同一文件中的getStatusClassNames负责生成状态类名statusUtils.tsexport function getStatusClassNames(prefixCls: string, status?: ValidateStatus, hasFeedback?: boolean) { return classNames({ [${prefixCls}-status-success]: status success, [${prefixCls}-status-warning]: status warning, [${prefixCls}-status-error]: status error, [${prefixCls}-status-validating]: status validating, [${prefixCls}-has-feedback]: hasFeedback, }); }结合prefixCls ant-select最终生成的类名就是ant-select-status-error与ant-select-status-warning。这一点可以由仓库内的快照测试佐证——在 demo.test.tsx.snap 中status 演示渲染出的 DOM 类名依次包含classant-select ant-select-outlined ant-select-status-error ant-select-auto-complete ant-select-single ant-select-show-search classant-select ant-select-outlined ant-select-status-warning ant-select-auto-complete ant-select-single ant-select-show-search可见statuserror/statuswarning会分别驱动ant-select-status-error/ant-select-status-warning类最终由 antd 的样式体系select 样式将红色/黄色边框、聚焦态等视觉样式应用到输入框上。四、与 Form 表单结合从校验上下文自动获得状态除手动传入外status最典型的落地场景是配合 Form.Item 的校验规则使用。当 AutoComplete 位于 Form.Item 内部时Form 的validateStatus如校验失败产生error会通过FormItemInputContext自动注入到 Select/AutoComplete校验失败 → 输入框自动呈现红色error态无需手动传status校验中/通过等状态同样可通过hasFeedback在输入框右侧展示反馈图标。而getMergedStatus的customStatus || contextStatus规则保证了一旦开发者显式指定status它将覆盖 Form 上下文状态。这在某字段既受表单校验、又要根据业务逻辑临时强显警示色的场景下非常实用。五、使用建议与注意事项可结合options空态行为根据 AutoComplete 官方文档 FAQ当options为空时即使open为true也不会展示下拉菜单避免用户误以为组件不可操作status只影响输入框视觉状态不影响这一行为。受控输入优先用onChange官方 FAQ 特别提示受控场景下请用onChange管理值onSearch只在搜索输入时触发、点击选项时不触发不要用它做受控数据源。与其他形态属性配合status可独立使用也可与variantoutlined/filled/borderless5.13.0见 variant.tsx、allowClear、disabled等属性自由组合满足不同视觉诉求。自定义输入框场景若通过children传入自定义输入框size等样式需自行控制源码中对应devUseWarning提示此时建议自行在自定义输入上同步处理状态样式保证视觉一致。六、总结AutoComplete 的status属性提供了一种极简的方式来表达输入内容的校验状态error与warning两个取值即可覆盖输入有误与需要提示两类常见场景。其实现本质是 Select 封装SECRET_COMBOBOX_MODE_DO_NOT_USE模式 状态合并getMergedStatus的显式优先规则 样式类生成getStatusClassNames输出ant-select-status-error/ant-select-status-warning三者的组合。既可以在 Form 中随校验状态自动切换也可以脱离表单手动控制配合快照测试demo.test.tsx.snap可随时验证其渲染结果。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Ant Design AutoComplete 状态属性实战：用 status 实现 error / warning 校验态
Ant Design AutoComplete 状态属性实战用 status 实现 error / warning 校验态【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-designAutoComplete自动完成是 Ant Design 数据录入组件中一个可自由输入并附带建议选项的文本输入框。本文将聚焦status属性讲解如何为 AutoComplete 设置error错误与warning警告两种校验状态并结合仓库源码AutoComplete 实现、Select 底层渲染 与 statusUtils 工具剖析其内部原理、与 Form 表单校验状态的合并规则以及对应样式类名帮助你在表单校验、实时输入反馈等场景中快速落地。一、status 属性是什么status用于为 AutoComplete 输入框设置校验状态目前支持两个取值取值说明error错误状态输入框呈现红色警示样式warning警告状态输入框呈现黄色提示样式该属性自4.19.0版本起提供类型定义为error | warning默认值为-即不设置。在 AutoCompleteProps 接口 中status?: InputStatus与popupClassName、options等属性并列且 AutoComplete 的status并未单独实现而是通过继承 Select 组件的内部属性InternalSelectProps透传获得。二、完整演示error 与 warning 两种状态官方演示 status.tsx 在同一页面内并排渲染了两个 AutoComplete分别设置statuserror与statuswarningimport React, { useState } from react; import { AutoComplete, Space } from antd; import type { AutoCompleteProps } from antd; const mockVal (str: string, repeat 1) ({ value: str.repeat(repeat), }); const App: React.FC () { const [options, setOptions] useStateAutoCompleteProps[options]([]); const [anotherOptions, setAnotherOptions] useStateAutoCompleteProps[options]([]); const getPanelValue (searchText: string) !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)]; return ( Space directionvertical style{{ width: 100% }} AutoComplete options{options} onSearch{(text) setOptions(getPanelValue(text))} statuserror style{{ width: 200 }} / AutoComplete options{anotherOptions} onSearch{(text) setAnotherOptions(getPanelValue(text))} statuswarning style{{ width: 200 }} / /Space ); }; export default App;要点说明options通过onSearch回调动态生成getPanelValue利用str.repeat(repeat)构造 搜索词、搜索词×2、搜索词×3 三组候选值实现输入即出提示的效果。status直接以 props 形式传入配合style{{ width: 200 }}控制输入框宽度。两个示例用Space directionvertical纵向排列便于直观对比 error 与 warning 的视觉差异。如果你只需要基础用法可参考 basic.tsx不传status时组件保持默认态并通过value、onChange、onSelect、placeholder实现受控输入。三、底层原理status 如何透传到 Select 并生成样式类3.1 AutoComplete 只是 Select 的封装从 index.tsx 可以看到AutoComplete 内部最终渲染的是 Select 组件并做三件事通过{...omit(props, [dataSource, dropdownClassName])}将除遗留属性外的所有 props包括status原样透传给 Select设置mode{Select.SECRET_COMBOBOX_MODE_DO_NOT_USE}将 Select 强制切到 combobox可自由输入模式传入prefixCls{getPrefixCls(select, customizePrefixCls)}即 AutoComplete 复用了ant-select前缀的样式体系。因此status的样式渲染链路完全由 Select 承担。3.2 Select 中的状态合并逻辑在 Select 组件 中状态处理如下const { status: contextStatus, hasFeedback, isFormItemInput, feedbackIcon, } React.useContext(FormItemInputContext); const mergedStatus getMergedStatus(contextStatus, customStatus);其中customStatus来自你在 props 上显式传入的statuscontextStatus来自 Form.Item 通过FormItemInputContext注入的校验状态。合并规则定义在 statusUtils.tsexport const getMergedStatus (contextStatus?: ValidateStatus, customStatus?: InputStatus) customStatus || contextStatus;这意味着一句关键的优先级规则显式传入的status优先级高于 Form 上下文中的校验状态。当两者同时存在时以显式传入值为准。3.3 状态样式类的生成同一文件中的getStatusClassNames负责生成状态类名statusUtils.tsexport function getStatusClassNames(prefixCls: string, status?: ValidateStatus, hasFeedback?: boolean) { return classNames({ [${prefixCls}-status-success]: status success, [${prefixCls}-status-warning]: status warning, [${prefixCls}-status-error]: status error, [${prefixCls}-status-validating]: status validating, [${prefixCls}-has-feedback]: hasFeedback, }); }结合prefixCls ant-select最终生成的类名就是ant-select-status-error与ant-select-status-warning。这一点可以由仓库内的快照测试佐证——在 demo.test.tsx.snap 中status 演示渲染出的 DOM 类名依次包含classant-select ant-select-outlined ant-select-status-error ant-select-auto-complete ant-select-single ant-select-show-search classant-select ant-select-outlined ant-select-status-warning ant-select-auto-complete ant-select-single ant-select-show-search可见statuserror/statuswarning会分别驱动ant-select-status-error/ant-select-status-warning类最终由 antd 的样式体系select 样式将红色/黄色边框、聚焦态等视觉样式应用到输入框上。四、与 Form 表单结合从校验上下文自动获得状态除手动传入外status最典型的落地场景是配合 Form.Item 的校验规则使用。当 AutoComplete 位于 Form.Item 内部时Form 的validateStatus如校验失败产生error会通过FormItemInputContext自动注入到 Select/AutoComplete校验失败 → 输入框自动呈现红色error态无需手动传status校验中/通过等状态同样可通过hasFeedback在输入框右侧展示反馈图标。而getMergedStatus的customStatus || contextStatus规则保证了一旦开发者显式指定status它将覆盖 Form 上下文状态。这在某字段既受表单校验、又要根据业务逻辑临时强显警示色的场景下非常实用。五、使用建议与注意事项可结合options空态行为根据 AutoComplete 官方文档 FAQ当options为空时即使open为true也不会展示下拉菜单避免用户误以为组件不可操作status只影响输入框视觉状态不影响这一行为。受控输入优先用onChange官方 FAQ 特别提示受控场景下请用onChange管理值onSearch只在搜索输入时触发、点击选项时不触发不要用它做受控数据源。与其他形态属性配合status可独立使用也可与variantoutlined/filled/borderless5.13.0见 variant.tsx、allowClear、disabled等属性自由组合满足不同视觉诉求。自定义输入框场景若通过children传入自定义输入框size等样式需自行控制源码中对应devUseWarning提示此时建议自行在自定义输入上同步处理状态样式保证视觉一致。六、总结AutoComplete 的status属性提供了一种极简的方式来表达输入内容的校验状态error与warning两个取值即可覆盖输入有误与需要提示两类常见场景。其实现本质是 Select 封装SECRET_COMBOBOX_MODE_DO_NOT_USE模式 状态合并getMergedStatus的显式优先规则 样式类生成getStatusClassNames输出ant-select-status-error/ant-select-status-warning三者的组合。既可以在 Form 中随校验状态自动切换也可以脱离表单手动控制配合快照测试demo.test.tsx.snap可随时验证其渲染结果。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考