【免费下载链接】element-reactElement UI项目地址https://gitcode.com/gh_mirrors/el/element-react点击查看免费下载本篇指南以 element-react 官方英文文档 site/docs/en-US/input.md 为骨架结合仓库内 Input 组件源码、自适应高度算法 与 AutoComplete 实现 展开系统讲解 React 版本 Element UI 中输入类组件的全部用法基础输入、禁用、图标、文本域、自适应高度、前后缀混合输入、多档尺寸以及基于 AutoComplete 的本地联想与远程搜索。读完本文你将能够在自己的 React 项目中完整落地Input与AutoComplete两大组件并理解其内部工作机理。组件定位一个组件族两种能力element-react 的Input组件位于 src/input对外通过 src/input/index.js 导出AutoComplete组件位于 src/auto-complete内部直接复用了Input作为输入框本体。两个组件在文档中属于同一主题Input负责输入数据AutoComplete负责基于当前输入给出推荐提示。import { Input, AutoComplete } from element-react;从 AutoComplete.jsx 源码 可以看到AutoComplete 的渲染本质上是Input之上叠加一层建议下拉面板Suggestions因此理解Input的属性是掌握 AutoComplete 的前提。基础用法与受控值处理最基本的输入框文档中最简单的示例只传入一个占位符render() { return Input placeholderPlease input / }placeholder直接透传给原生input元素。从 Input.jsx 的 defaultProps 可知type默认值为text、autoComplete默认值为off、rows默认值为 2。禁用状态通过disabled属性禁用输入框render() { return Input disabled placeholderPlease input / }源码中disabled会为根节点附加is-disabled样式类见 Input.jsx 的 classNames 逻辑同时透传给原生 input。仓库测试 Input_test.jsx 专门验证了这一行为it(disabled, () { const w shallow(Input disabled /); expect(w.find(.el-input input).prop(disabled)).toBe(true); });受控组件的值归一化value支持 string/number。源码中的fixControlledValue方法Input.jsx 第 51-56 行会在渲染前将undefined和null归一化为空字符串避免 React 受控组件出现输入后无法清空的经典问题同时只要value出现在 props 中就会覆盖defaultValueInput.jsx 第 123-127 行。文档中 Input 属性表将value描述为binding value即绑定值。带图标的输入框icon属性用于在输入框尾部显示图标并通过onIconClick钩子响应点击handleIconClick() { } render() { return ( Input icontime placeholderPick a date onIconClick{this.handleIconClick.bind(this)} / ) }在 Input.jsx 的渲染逻辑 中当icon是字符串时会渲染为i className{el-input__icon el-icon- icon} onClick{...} /图标名会拼接到el-icon-前缀之后若传入的是 React 元素则直接渲染该元素。onIconClick的默认值为undefined只有在显式传入时才触发Input.jsx 第 86-90 行。测试用例 Input_test.jsx 验证了icontime会生成.el-icon-time节点且点击后回调恰好触发一次。文本域 Textarea将type设置为textarea组件内部会把input切换为原生textareaInput.jsx 第 134-147 行根节点样式类也从el-input变为el-textarea。render() { return ( Input typetextarea autosize{{ minRows: 2, maxRows: 4}} placeholderPlease input / ) }rows属性控制文本域初始行数默认值为 2仅在typetextarea时生效。测试 Input_test.jsx 验证了rows{3}会正确透传到.el-textarea__inner元素上。resize属性控制文本域的可拖拽缩放能力取值有none、both、horizontal、vertical四种。从源码看resize会进入初始textareaStyle状态Input.jsx 第 26-28 行测试 Input_test.jsx 验证了resizeboth会映射到 textarea 的style.resize。自适应高度 Autosize Textarea用法autosize让文本域高度随内容自动伸缩可传布尔值或配置对象render() { return ( div Input typetextarea autosize{true} placeholderPlease input / div style{{ margin: 20px 0 }}/div Input typetextarea autosize{{ minRows: 2, maxRows: 4}} placeholderPlease input / /div ) }autosize{true}开启自适应不限行数范围autosize{{ minRows: 2, maxRows: 4 }}高度在 2 行与 4 行之间自动调整超出 4 行出现滚动。文档属性表说明autosize类型为boolean/object仅对typetextarea生效默认false。底层原理隐藏 textarea 测量算法autosize的实际计算由 src/input/calcTextareaHeight.js 完成其核心思路是以隐测量代替显计算首次调用时在document.body下创建一个隐藏的textarea高度 0、visibility:hidden、overflow:hidden、绝对定位见 calcTextareaHeight.js 第 3-13 行。通过window.getComputedStyle读取目标 textarea 的 15 项上下文样式letter-spacing、line-height、padding、font-family、font-size、border-width、box-sizing等见 calcTextareaHeight.js 第 15-31 行并将这些样式复制到隐藏 textarea 上保证测量结果与真实渲染一致。将目标节点的value || placeholder写入隐藏 textarea取其scrollHeight得到当前内容所需高度再清空内容计算单行高度singleRowHeight。根据box-sizing校正padding与border的影响最后用minRows、maxRows夹取高度height Math.max(minHeight, height)与height Math.min(maxHeight, height)见 calcTextareaHeight.js 第 86-99 行。在 Input.jsx 中resizeTextarea会在组件挂载componentDidMount以及每次change时被调用把计算结果合并进textareaStyle状态实现输入即伸缩。混合输入前置与后置插槽使用prepend和append在输入框前后附加标签、按钮或其他组件文档中称为 Mixed inputrender() { return ( div Input placeholderPlease input prependHttp:// / Input placeholderPlease input append.com / Input placeholderPlease input prepend{ Select value placeholderSelect { [Restaurant, Order No., Tel].map((item, index) Select.Option key{index} label{item} value{index} /) } /Select } append{Button typeprimary iconsearchSearch/Button} / /div ) }从 Input.jsx 渲染逻辑 可以看到其实现细节prepend渲染在输入框左侧的.el-input-group__prepend容器内append渲染在右侧的.el-input-group__append容器内只要prepend或append任一存在根节点就会附加el-input-group、el-input-group--prepend/el-input-group--append样式类Input.jsx 第 117-119 行。prepend、append的类型是PropTypes.node可传入字符串、React 元素乃至完整的Select、Button组件树实现前缀选择器 搜索按钮这类复杂组合表单。尺寸档位large / small / minisize属性用于调整输入框尺寸文档明确除默认尺寸外可选large、small、mini三档且仅在type不为textarea时生效render() { return ( div classNameinline-input Input placeholderPlease input sizelarge / Input placeholderPlease input / Input placeholderPlease input sizesmall / Input placeholderPlease input sizemini / /div ) }源码 Input.jsx 第 115 行 将尺寸映射为el-input--large/el-input--small/el-input--mini样式类具体视觉差异由样式表控制。测试 Input_test.jsx 断言sizelarge时组件带有el-input--large类。文档页面样式 site/pages/input/style.scss 还提供了.inline-input辅助类用于让多个输入框水平排列展示。Input 属性速查表以下为文档 site/docs/en-US/input.md 中完整属性表结合 Input.jsx 的 propTypes 补充了取值约束与默认值属性说明类型可选值默认值type同原生 input 的type可设为textareastring—textvalue绑定值string/number——maxLength最大输入长度number——minLength最小输入长度number——placeholder占位提示文本string——disabled是否禁用boolean—falsesize输入框尺寸type为 textarea 时不生效stringlarge/small/mini—icon图标名称string——rows文本域行数仅typetextarea生效number—2autosize文本域自适应高度可传对象如{ minRows: 2, maxRows: 6 }仅 textarea 生效boolean/object—falseautoComplete同原生auto-completestringon/offoffname同原生namestring——readOnly同原生readonlyboolean—falsemax同原生max———min同原生min———step同原生step———resize控制文本域缩放stringnone/both/horizontal/vertical—autoFocus同原生autofocusboolean—falseonIconClick点击输入框图标时的钩子函数function——trim失焦时去除首尾空格boolean—false补充说明两个文档未展开但源码可见的细节trim 的生效时机trim默认false。在 handleBlur 中失焦时会调用handleTrim把refs.input.value的空白去除并再次触发onChange以便受控组件同步值Input.jsx 第 78-84 行。实例方法 focus / blur组件暴露了focus()与blur()实例方法Input.jsx 第 37-47 行通过 ref 调用可编程控制焦点。表单校验联动validating属性为 true 时会在输入框尾部渲染el-icon-loading加载图标Input.jsx 第 162 行常与 Form 组件 的表单校验配合使用。AutoComplete 基础本地联想AutoComplete 组件提供基于当前输入的推荐提示。fetchSuggestions是核心属性——一个获取建议的方法签名是Function(queryString, callback)当建议数据准备好后通过cb(data)把数组返回给组件。constructor(props) { super(props); this.state { restaurants: [ { value: vue, address: ... }, { value: element, address: ... }, // ...更多数据 ], value1: , value2: } } querySearch(queryString, cb) { const { restaurants } this.state; const results queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants; // 调用 callback 返回建议列表的数据 cb(results); } createFilter(queryString) { return (restaurant) { return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) 0); }; } handleSelect(item) { } render() { return ( div AutoComplete placeholderPlease input value{this.state.value1} fetchSuggestions{this.querySearch.bind(this)} onSelect{this.handleSelect.bind(this)} / AutoComplete placeholderPlease input value{this.state.value2} fetchSuggestions{this.querySearch.bind(this)} onSelect{this.handleSelect.bind(this)} triggerOnFocus{false} / /div ) }上面的示例对应文档中列表建议在聚焦时即显示与列表建议在输入时才显示两种模式区别在于triggerOnFocustriggerOnFocus默认为true输入框一获得焦点就调用getData拉取建议AutoComplete.jsx 第 108-114 行设为false聚焦时不请求仅在输入内容变化后触发且输入框被清空时会立即清空建议列表AutoComplete.jsx 第 94-106 行。fetchSuggestions返回的数据最终经 Suggestions.jsx 渲染为下拉列表下拉面板由popper.js定位、宽度跟随输入框dropdownWidth并使用 Scrollbar 组件 承载列表滚动。键盘交互AutoComplete 内置键盘导航AutoComplete.jsx 第 175-191 行方向键↑/↓在建议项之间移动高亮高亮项会自动滚动进入可视区域highlight方法回车键Enter选中当前高亮项并调用onSelecthandleKeyEnter点击组件外部通过react-click-outside包裹失焦时关闭下拉AutoComplete.jsx 第 229 行。选中某个建议后select会把该项的value写回输入框并清空建议列表AutoComplete.jsx 第 128-136 行。自定义模板定制建议项的展示默认情况下建议列表直接渲染每项的value字段通过customItem可以传入一个自定义 React 组件来接管建议项的渲染render() { return ( AutoComplete classNamemy-autocomplete iconedit placeholderPlease input value{this.state.value} fetchSuggestions{this.querySearch.bind(this)} customItem{this.props.customItem} onSelect{this.handleSelect.bind(this)} / ) }customItem接收一个组件该组件会被注入index当前项索引与item建议数据项两个 props。仓库文档站提供了一个参考实现 site/pages/input/custom-item.jsx把建议项渲染为名称 地址两行结构class CustomItem extends React.Component { render() { return ( div div classNamename{this.props.item.value}/div span classNameaddr{this.props.item.address}/span /div ) } }对应地在 Suggestions.jsx 第 96-101 行 中未传customItem时直接输出item.value传入时则通过React.createElement(customItem, { index, item })动态渲染自定义组件。文档页会把这个组件通过 site/pages/input/index.jsx 的defaultProps注入示例其配套样式.name、.addr、text-overflow见 site/pages/input/style.scss。远程搜索从服务端获取建议AutoComplete 天然支持异步数据源——fetchSuggestions内部并不要求同步返回只要稍后调用cb即可因此可以配合setTimeout或 Ajax 请求模拟服务端查询。文档示例用setTimeout模拟网络延迟querySearchAsync(queryString, cb) { const { restaurants } this.state; const results queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants; clearTimeout(this.timeout); this.timeout setTimeout(() { cb(results); }, 3000 * Math.random()); } render() { return ( AutoComplete placeholderPlease input value{this.state.value} fetchSuggestions{this.querySearchAsync.bind(this)} onSelect{this.handleSelect.bind(this)} / ) }实际项目中把fetchSuggestions替换为axios/fetch请求接口并在回调中返回cb(data)即可完成远程搜索。请求进行期间下拉面板会显示.is-loading状态和el-icon-loading加载图标Suggestions.jsx 第 88-89 行。在 AutoComplete.jsx 的 getData 实现 中需要注意两点请求发起时置loadingtrue回调数据仅当Array.isArray(suggestions)时才写入状态非数组数据会被安全忽略。AutoComplete 属性与事件速查属性表属性说明类型可选值默认值placeholder占位提示文本string——disabled是否禁用boolean—falseicon图标名称string——value绑定值string——customItem自定义建议项组件string——fetchSuggestions获取建议的方法建议就绪后调用callback(data:[])返回Function(queryString, callback)——popperClass下拉面板自定义类名string——triggerOnFocus聚焦时是否显示建议boolean—trueonIconClick点击输入框图标的钩子函数function——此外从 AutoComplete.jsx 的 Props 定义 可知name、size、prepend、append、onFocus、onBlur、onChange也会被透传给内部的Input因此 Input 的大部分能力在 AutoComplete 中同样可用。事件表事件名说明参数onSelect点击某个建议项时触发被点击的建议项对象测试验证与实现佐证仓库为 Input 提供了完整的单元测试 src/input/test/Input_test.jsx覆盖了本文涉及的主要场景可作为二次开发时的行为契约参考create默认渲染出.el-input根节点disabled禁用属性透传到原生 inputicon图标节点.el-icon-time存在且点击触发回调sizeel-input--large样式类正确附加typetextarea 模式根节点切换为.el-textarearows行数正确透传给.el-textarea__innerresizeresize值正确映射到 textarea 的 style。小结通过 site/docs/en-US/input.md 与源码的对照可以总结出 element-react 输入体系的几个关键结论Input是一个双形态组件默认渲染单行inputtypetextarea时切换为多行textarea两种形态共享受控值归一化、事件回调与样式体系自适应高度并非简单估算而是基于隐藏 textarea 的scrollHeight实测并兼容minRows/maxRows与box-sizing差异见 calcTextareaHeight.jsAutoComplete是Input的增强封装输入、图标、前后缀全部复用额外增加建议获取、键盘导航、popper 定位下拉与自定义渲染能力fetchSuggestions的回调式设计天然适配异步场景本地过滤、防抖请求、远程接口均可无缝接入。掌握了这些属性与内部机制无论是搭建简单的登录表单还是实现复杂的搜索联想框都能直接基于 element-react 快速落地。赞分享【免费下载链接】element-reactElement UI项目地址https://gitcode.com/gh_mirrors/el/element-react点击查看免费下载相关推荐Element UIVue 2Input 组件实战从受控组件、Textarea 自适应高度到 Autocomplete 远程搜索Element UIVue 2Input 组件实战从受控组件、Textarea 自适应高度到 Autocomplete 远程搜索 Element 是面向前端UI组件设计系统Element Plus Autocomplete 组件完全指南从基础建议框到远程搜索与自定义渲染Element Plus Autocomplete 组件完全指南从基础建议框到远程搜索与自定义渲染 本篇技术指南以 Element Plus Autocomp前端UI组件Element UIVue 2.0Input 输入框与 Autocomplete 自动补全组件完整实战指南Element UIVue 2.0Input 输入框与 Autocomplete 自动补全组件完整实战指南 el input 是 Element UI 组件前端UI组件设计系统上一篇shadcn-vue InputGroup 组件完全指南为输入框与文本域构建前缀、后缀与操作区下一篇ingress-nginx controller v1.10.5 版本发布解读镜像构建、多租户警告与关键指标修复全解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考