{"meta":"

表单数据管理组件。

\n

何时使用 #

\n

涉及到表单数据操作、校验的地方都可以用Field来管理数据。和组件关联后可以自动对表单数据进行回写、读取、校验。

\n

如何使用 #

\n\n

基本使用 #

\n
class Demo extends React.Component {\n    field = new Field(this); // 实例创建\n\n    onClick = () => {\n        console.log(this.field.getValue('name'));\n    };\n    render() {\n        const init = this.field.init;\n\n        // 注意：initValue只会在组件第一次初始化的时候被赋值，如果你是异步赋值请用setValue\n        return (\n            <div>\n                <Input {...init('name', { initValue: 'first value' })} />\n                <button onClick={this.onClick}>获取数据</button>\n            </div>\n        );\n    }\n}\n
\n

更新数据 #

\n

事件更新

\n
class Demo extends React.Component {\n    field = new Field(this);\n\n    onClick = () => {\n        this.field.setValue('name', 'newvalue'); // 赋值会自动触发render\n    };\n    render() {\n        const init = this.field.init;\n\n        return (\n            <div>\n                <Input {...init('name')} />\n                <button onClick={this.onClick}>设置数据</button>\n            </div>\n        );\n    }\n}\n
\n

props更新

\n
class Demo extends React.Component {\n    field = new Field(this);\n\n    // 在组件挂载之前把数据设置进去(可以用initValue替代这种用法)\n    componentWillMount() {\n        this.field.setValue('name', 'init Name');\n    }\n    // 接收来自props的数据\n    componentWillReceiveProps(nextProps) {\n        this.field.setValue('name', nextProps.name);\n    }\n    render() {\n        const init = this.field.init;\n\n        return (\n            <div>\n                <Input {...init('name')} />\n            </div>\n        );\n    }\n}\n
\n

ajax更新

\n
class Demo extends React.Component {\n    field = new Field(this);\n\n    onClick = () => {\n        Ajax({\n            url: '/demo.json',\n            success: json => {\n                // 回调事件中赋值更新\n                this.field.setValue('name', json.name);\n            },\n        });\n    };\n    render() {\n        const init = this.field.init;\n\n        return (\n            <div>\n                <Input {...init('name')} />\n                <button onClick={this.onClick}>设置数据</button>\n            </div>\n        );\n    }\n}\n
\n

onChange更新监控

\n

两种用法：

\n
    \n
  1. 统一管理
    2. \n
\n
class Demo extends React.Component {\n    field = new Field(this, {\n        onChange: (name, value) => {\n            switch (name) {\n                case 'name1':\n                    this.field.setValue('name2', 'value set by name1');\n                    break;\n                case 'name2':\n                    this.field.setValue('name1', 'value set by name2');\n                    break;\n            }\n        },\n    });\n    render() {\n        const init = this.field.init;\n\n        return (\n            <div>\n                <Input {...init('name1')} />\n                <Input {...init('name2')} />\n            </div>\n        );\n    }\n}\n
\n
    \n
  1. 各自管理
    2. \n
\n
class Demo extends React.Component {\n    render() {\n        const init = this.field.init;\n\n        return (\n            <div>\n                <Input\n                    {...init('name1', {\n                        props: {\n                            onChange: v => {\n                                this.field.setValue('name2', 'value set by name1');\n                            },\n                        },\n                    })}\n                />\n                <Input\n                    {...init('name2', {\n                        props: {\n                            onChange: v => {\n                                this.field.setValue('name1', 'value set by name2');\n                            },\n                        },\n                    })}\n                />\n            </div>\n        );\n    }\n}\n
\n

详细请查看demo演示 #关联控制。

\n","api":"

API #

\n\n
let myfield = new Field(this [,options]);\n\n// 或者使用hooks\n\nlet myfield = Field.useField([options]); // 要求 react 版本 > 16.8\n
\n

Field参数说明 #

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型可选值默认值
this传入调用class的thisReact.Component必须设置
options一些事件配置, 详细参数如下Object非必须
\n

options 配置项 #

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
onChange所有组件的change都会到达这里[setValue不会触发该函数]Function(name,value)
parseName是否翻译init(name)中的name(getValues会把带.的字符串转换成对象)Booleanfalse
forceUpdate仅建议PureComponent的组件打开此强制刷新功能，会带来性能问题(500个组件为例：打开的时候render花费700ms, 关闭时候render花费400ms)Booleanfalse
scrollToFirstErrorfield.validate的时候滚动到第一个出错的组件, 如果是整数会进行偏移, 浏览器兼容性关注scrollIntoViewIfNeededBoolean/Numbertrue
autoUnmount自动删除Unmout元素，如果想保留数据可以设置为falseBooleantrue
autoValidate是否修改数据的时候就自动触发校验, 设为 false 后只能通过 validate() 来触发校验Booleantrue
values初始化数据Object-
\n

接口说明 #

\n

new之后的对象提供的api接口 （例：myfield.getValues()）(set 开头的api函数不要在render里面操作, 可能会触发死循环)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型可选值默认值
init初始化每个组件，详细参数如#init函数Function(name:String, option:Object)
getValues获取一组输入控件的值，如不传入参数，则获取全部组件的值Function([names: String[]])
getValue获取单个输入控件的值Function(name: String)
setValues设置一组输入控件的值（会触发render，请遵循react时机使用)Function(obj: Object)
setValue设置单个输入控件的值 （会触发render，请遵循react时机使用)Function(name: String, value)
validate校验并获取一组输入域的值与 ErrorFunction([names: String[]], callback: Function(errors, values))
getError获取单个输入控件的 ErrorFunction(name: String)
getErrors获取一组输入控件的 ErrorFunction([name: String])
setError设置单个输入控件的 ErrorFunction(name: String, errors:String/Array[String])
setErrors设置一组输入控件的 ErrorFunction(obj: Object)
reset重置一组输入控件的值、清空校验Function([names: String[]])
resetToDefault重置一组输入控件的值为默认值Function([names: String[]])
getState判断校验状态Function(name: String)'error' 'success' 'loading' ''''
getNames获取所有组件的keyFunction()
remove删除某一个或者一组控件的数据，删除后与之相关的validate/value都会被清空Function(name: String/String[])
addArrayValue添加 name 是数组格式的数据, 并且自动处理其他 name 的数组错位问题Function(key: String, index: Number, value1, value2, ...)
deleteArrayValue删除 name 是数组格式的数据, 并且自动处理其他 name 的数组错位问题Function(key: String, index: Number, howmany)
watch监听字段值变化Function(names: String[], callback: Function(name: String, value: any, oldValue: any, triggerType: 'init' | 'change' | 'setValue' | 'unmount' | 'reset'))
\n

init函数 #

\n
init(name, options, props);\n
\n

返回值

\n
{\n    id, value, onChange;\n}\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型可选值默认值
name必填输入控件唯一标志String
options.valueName组件值的属性名称，如 Checkbox 的是 checked，Input是 valueString'value'
options.initValue组件初始值(组件第一次render的时候才会读取，后面再修改此值无效),类似defaultValueany
options.trigger触发数据变化的事件名称String'onChange'
options.rules校验规则Array/Object
options.getValueFormatter自定义从组件获取 value ，详细用法查看demo 自定义数据获取Function(value,...args) 参数顺序和组件是完全一致的
options.setValueFormatter自定义转换 value 到组件 ，详细用法查看demo 自定义数据获取Function(value)
props组件自定义的事件可以写在这里Object
autoValidate是否修改数据的时候自动触发校验单个组件的校验, 设为 false 后只能通过 validate() 来触发校验Booleantrue
\n

rules参数 #

\n
{\n    rules: [{ required: true }];\n}\n
\n

多个rule

\n
{\n    rules: [\n        { required: true, trigger: 'onBlur' },\n        { pattern: /abcd/, message: 'abcd不能缺', trigger: 'onChange' },\n        {\n            validator: (rule, value, callback) => {\n                callback('出错了');\n            },\n        },\n    ];\n}\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型可选值使用类型
required不能为空Booleantrueundefined/null/“”/[] 会触发此规则)
pattern校验正则表达式正则
minLength字符串最小长度 / 数组最小个数NumberString/Number/Array
maxLength字符串最大长度 / 数组最大个数NumberString/Number/Array
length字符串精确长度 / 数组精确个数NumberString/Number/Array
min最小值NumberString/Number
max最大值NumberString/Number
format对常用 pattern 的总结Stringurl、email、tel、numberString
validator自定义校验, 校验的结果通过用户传递给 callback 的参数决定(校验成功的时候不要忘记执行 callback(),否则会校验不返回):
- callback() 无参数表示校验成功
- callback('this is a error msg') 有参数表示校验失败，并且参数为错误信息		Function(rule,value,callback)
trigger触发校验的事件名称String/ArrayonChange/onBlur/onFocus/...onChange
message出错时候信息String
\n

Field.useWatch #

\n

field.watch 的 react hook 实现

\n
type WatchTriggerType = 'init' | 'change' | 'setValue' | 'unmount' | 'reset';\ninterface WatchCallback {\n    (name: string, value: unknown, oldValue: unknown, triggerType: WatchTriggerType): void;\n}\nclass Field {\n    static useWatch: (field: Field, names: string[], callback: WatchCallback) => void;\n}\n
\n\n

FAQ #

\n

自定义组件接入Field标准？ #

\n\n
componentWillReceiveProps(nextProps) {\n    if ('value' in nextProps ) {\n        this.setState({\n           value: nextProps.value === undefined? []: nextProps.value   //  设置组件的被清空后的数值\n        })\n    }\n}\n
\n

为何手动调用this.field.validate的时候进不了回调函数？ #

\n

可能是自定义了validator方法，确保callback在任何分支下都能被执行到。

\n","renderHtml":""}