简介
@beisen-cmps/composite-text-box
是一个基于 React 开发的组合文本框组件,提供自定义验证规则与错误信息,支持多个子组件联动操作,可定制化的容器组件,且具有良好的扩展性。
安装
使用 npm
或 yarn
进行安装:
- --- --- ------- ------------------------------- - ---- ---- --- -------------------------------
快速开始
引入
------ ---------------- ---- ----------------------------------
组件使用
------------------ ------------ ---------- -------- ------------------ -- ------------------------ ----------------------------- -- ------------ --------- -------- ------------- -------------- ------------------ -- ----------------- -- ------------------------ ------------------------------ -- -------------------
API
CompositeTextBox
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
container | React component | div | 容器组件 |
children | React Element[] | TextBoxRule 组件集合 | |
submit | Function | 提交函数,用于获取所有子组件的值,并进行验证和其他操作 | |
onValidated | Function | 验证成功时的回调函数 | |
onError | Function | 验证失败时的回调函数 | |
onChange | (event: React.ChangeEvent) => void | value 变更时的回调函数,返回最新状态 | |
onBlur | (event: React.FocusEvent) => void | 焦点移出时的回调函数,返回最新状态 | |
onFocus | (event: React.FocusEvent) => void | 焦点移入时的回调函数,返回最新状态 | |
disabled | boolean | false | 是否禁用 |
className | string | 自定义样式类名 | |
style | React.CSSProperties | 自定义样式 | |
size | "small" | "middle" | "large" | "middle" | 尺寸大小 |
value | any | ComposeTextBox 实例的值,可用于单向数据绑定,需要配合 onChange 使用 | |
defaultValue | any | ComposeTextBox 实例的初始值 | |
name | string | ComposeTextBox 实例的名称,表单提交时的 name 属性 | |
id | string | ComposeTextBox 实例的唯一标识,表单提交时的 id 属性 | |
innerClassName | string | 内部组件的样式类名 | |
forwardRef | React.Ref | ref 属性 | |
resetOnSubmit | boolean | true | 是否在提交后自动重置所有子组件的值 |
resetOnError | boolean | true | 是否在验证错误后自动重置所有子组件的值 |
submitButtonPosition | "top" | "bottom" | "bottom" | submit 按钮的位置 |
TextBoxRule
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
name | string | 子组件名称 | |
value | any | 子组件值,可用于单向数据绑定,需要配合 onChange 使用 | |
defaultValue | any | 子组件的初始值 | |
placeholder | string | 提示信息 | |
validator | (value: any) => boolean | 验证方法 | |
validatorMessage | string | 验证失败的提示信息 | |
required | boolean | false | 是否为必填字段 |
minLength | number | 文本长度最小值 | |
maxLength | number | 文本长度最大值 | |
disabled | boolean | false | 是否禁用 |
className | string | 自定义样式类名 | |
style | React.CSSProperties | 自定义样式 | |
forwardRef | React.Ref | ref 属性 | |
onChange | (value: any) => void | value 变更时的回调函数,返回最新状态 | |
onBlur | (event: React.FocusEvent) => void | 焦点移出时的回调函数 | |
onFocus | (event: React.FocusEvent) => void | 焦点移入时的回调函数 |
示例
以下示例演示如何使用 @beisen-cmps/composite-text-box
组件。
------ ----- ---- -------- ------ ----------------- - ----------- - ---- ---------------------------------- ------ ------- -------- ----- - ----- -------- - ------- -- - ----------------------- ---------------------- -- ------ - ----- -------------------- ------------------ ------------ ---------- -------- ------------------ -- ------------------------ ----------------------------- ----------------- -- ------------------- -- ------------ --------- --------------- -------- ------------- -------------- ------------------ -- ----------------- -- ------------------------ ------------------------------ ----------------- -- ------------------- -- ------------------- ------- ----------------------------- ------- -- -
在上面的示例中,定义了一个简单的登录表单,包含了一个用户名和一个密码输入框。当用户输入内容时,组件会对输入内容进行验证,如果不符合规则,则会显示错误信息。当所有子组件校验都通过时,就可以触发最外层的表单提交的回调函数。
总结
@beisen-cmps/composite-text-box
组件是一个可高度定制的 React 文本框组合组件,它提供了许多 API 和配置项来方便组件的使用和扩展。在使用的过程中,我们可以根据需要选择或编写规则来进行校验,也可以通过自定义样式或容器组件来更改组件的外观。希望读者们能够通过阅读本教程,深入了解该组件。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/5eedabf0b5cbfe1ea06108d6