Fields can be used to manage data when it comes to form data manipulation and validation. After being associated with a component, the form data can be automatically written back, read, and verified.
\ninit components, value onChange must be placed in init's third argument, otherwise it may be overridden by init.Form has been deeply optimized with Field for data acquisition and automatic verification prompt. It is recommended to use Field in Form. Please check Form demo.parseName=true you could use getValues to get a struct value, but not work in getValue you still need pass complete keyClass Demo extends React.Component {\n Field = new Field(this); // instance creation\n\n onClick = ()=>{\n Console.log(this.field.getValue('name'));\n }\n Render() {\n Const init = this.field.init;\n\n // Note: initValue will only be assigned when the component is first initialized. If you are using an asynchronous assignment, use setValue\n Return <div>\n <Input {...init('name',{initValue:'first value'})} />\n <button onClick={this.onClick>Get Data</button>\n </div>\n }\n}\nClass Demo extends React.Component {\n Field = new Field(this);\n\n onClick = ()=>{\n this.field.setValue('name', 'newvalue'); // Assignment will automatically trigger render\n }\n Render() {\n Const init = this.field.init;\n\n Return <div>\n <Input {...init('name')} />\n <button onClick={this.onClick}>Settings</button>\n </div>\n }\n}\nClass Demo extends React.Component {\n Field = new Field(this);\n\n // Set the data before the component is mounted (this can be replaced with initValue)\n componentWillMount() {\n this.field.setValue('name', 'init Name')\n }\n // Receive data from props\n componentWillReceiveProps(nextProps) {\n this.field.setValue('name', nextProps.name)\n }\n Render() {\n Const init = this.field.init;\n\n Return <div>\n <Input {...init('name')} />\n </div>\n }\n}\nClass Demo extends React.Component {\n Field = new Field(this);\n\n onClick = ()=>{\n Ajax({\n Url:'/demo.json',\n Success:(json)=>{\n // Update of assignment in callback event\n this.field.setValue('name',json.name);\n }\n });\n }\n Render() {\n Const init = this.field.init;\n\n Return <div>\n <Input {...init('name')} />\n <button onClick={this.onClick}>Settings</button>\n </div>\n }\n}\nTwo usages:
\nClass 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 <div>\n <Input {...init('name1')} />\n <Input {...init('name2')} />\n </div>\n }\n}\nClass Demo extends React.Component {\n Render() {\n Const init = this.field.init;\n\n Return <div>\n <Input {...init('name1',{\n Props:{\n onChange:(v)=>{\n this.field.setValue('name2','value set by name1');\n }\n }\n })} />\n <Input {...init('name2',{\n Props:{\n onChange:(v)=>{\n this.field.setValue('name1','value set by name2');\n }\n }\n })} />\n </div>\n }\n}\nFor details, please check Demo Demo Associate Control
Let myfield = new Field(this [,options]);\n\nor with hooks\n\nlet myfield = Field.useField([options]); // react version must > 16.8\n| Parameter | \nDescription | \nType | \nOptional | \nDefault | \n
|---|---|---|---|---|
| this | \nThe incoming call to this class | \nReact.Component | \nmust be set | \n\n |
| options | \nSome event configuration, detailed parameters are as follows | \nObject | \nNot required | \n\n |
options configuration item
| Parameters | \nDescription | \nType | \nDefault | \n
|---|---|---|---|
| onChange | \nall component changes will arrive here [setValue won't trigger the function] | \nFunction(name,value) | \n\n |
| parseName | \nWhether to translate name in init(name) (getValues will convert a string with . to an object) | \nBoolean | \nfalse | \n
| forceUpdate | \nOnly the components of PureComponent are recommended to open this forced refresh function, which will cause performance problems (500 components as an example: the render will cost 700ms when it is turned on, and 400ms if it is turned off) | \nBoolean | \nfalse | \n
| scrollToFirstError | \nscrolling field.validate scrolls to the first errored component, offsets if it is an integer | \nBoolean/Number | \ntrue | \n
| autoUnmount | \nAutomatically delete the Unmout element, if you want to keep the data can be set to false | \nBoolean | \ntrue | \n
| autoValidate | \nAutomatically validate while value changed | \nBoolean | \ntrue | \n
| values | \ninitial value | \nObject | \n\n |
The api interface provided by the object after new (eg myfield.getValues()) (The api function starting with set should not be manipulated in render, which may trigger an infinite loop)
| Parameter | \nDescription | \nType | \nOptional | \nDefault | \n
|---|---|---|---|---|
| init | \nInitialize each component, [Detailed Parameters below] (#init)) | \nFunction(name:String, option:Object) | \n\n | \n |
| getValues | \nGet the value of a group of input controls. If no parameters are passed, get the values of all components | \nFunction([names: String[]]) | \n\n | \n |
| getValue | \nget the value of a single input control | \nFunction(name: String) | \n\n | \n |
| setValues | \nSets the value of a set of input controls (triggers render, follow the use of react time) | \nFunction(obj: Object) | \n\n | \n |
| setValue | \nSets the value of a single input control (triggers render, follow the use of react time) | \nFunction(name: String, value) | \n\n | \n |
| Validate | \nValidate and retrieve the values of a set of input fields and Error | \nFunction([names: String[]], callback: Function(errors, values)) | \n\n | \n |
| getError | \nGet Error of a Single Input Control | \nFunction(name: String) | \n\n | \n |
| getErrors | \nGet Errors of a Group of Input Controls | \nFunction([name: String]) | \n\n | \n |
| setError | \nSet Error for a Single Input Control | \nFunction(name: String, errors:String/Array[String]) | \n\n | \n |
| setErrors | \nSet Errors of a Group of Input Controls | \nFunction(obj: Object) | \n\n | \n |
| reset | \nreset the value of a group of input controls, clear the checksum | \nFunction([names: String[]]) | \n\n | \n |
| resetToDefault | \nResets the value of a group of input controls to the default | \nFunction([names: String[]]) | \n\n | \n |
| getState | \nJudge check status | \nFunction(name: String) | \n'error' 'success' 'loading' '' | \n'' | \n
| getNames | \nGet the key of all components | \nFunction() | \n\n | \n |
| remove | \nDelete the data of a certain control or a group of controls. After deletion, the validate/value associated with it will be cleared. | \nFunction(name: String/String[]) | \n\n | \n |
| addArrayValue | \nadd data of name like name.{index} | \nFunction(key: String, index: Number, value1, value2, ...) | \n\n | \n |
| deleteArrayValue | \ndelete data of name like name.{index} | \nFunction(key: String, index: Number, howmany) | \n\n | \n |
| watch | \nwatch field value changes | \nFunction(names: String[], callback: Function(name: String, value: any, oldValue: any, triggerType: 'init' | 'change' | 'setValue' | 'unmount' | 'reset')) | \n\n | \n |
init(name, options, props)\n| Parameter | \nDescription | \nType | \nOptional | \nDefault | \n
|---|---|---|---|---|
| name | \nRequired unique input control symbol | \nString | \n\n | \n |
| options.valueName | \nattribute name of the component value, such as Checkbox is checked, Input is value | \nString | \n\n | 'value' | \n
| options.initValue | \nThe initial value of the component (the component will be read only when rendering for the first time, and later modifying this value is invalid), similar to defaultValue | \nany | \n\n | \n |
| options.trigger | \nName of the event that triggered the data change | \nString | \n\n | 'onChange' | \n
| options.rules | \nChecksum Rules | \nArray/Object | \n\n | \n |
| options.getValueFormatter | \ncustom way to get value from onChange event, Detailed usage see demo custom data get | \nFunction(value, ...args) parameter order and components are exactly the same The | \n\n | \n |
| options.getValueFormatter | \ncustom way to set value. Detailed usage see demo custom data get | \nFunction(values) | \n\n | \n |
| props | \nComponent-defined events can be written here | \nObject | \n\n | \n |
| autoValidate | \nAutomatically validate while value changed | \nBoolean | \ntrue | \n\n |
return
\n{id,value,onChange}\n{\n rules:[{ required: true }]\n}\nmultiple rule
\n{\n rules:[{required:true,trigger:'onBlur'},{pattern:/abcd/,message:'match abcd'},{validator:(rule, value, callback)=>{callback('got error')}}]\n}\n| Parameter | \nDescription | \nType | \nOptional | \n
|---|---|---|---|
| required | \ncannot be empty | \nBoolean | \ntrue | \n
| pattern | \ncheck regular expression | \nregular | \n\n |
| minLength | \nMinimum string length / Minimum number of arrays | \nNumber | \n\n |
| maxLength | \nMaximum length of string / Maximum number of arrays | \nNumber | \n\n |
| length | \nstring exact length / exact number of arrays | \n\n | number | \n
| min | \nMin | \nNumber | \n\n |
| max | \nmaximum | \nNumber | \n\n |
| format | \nsum of common patterns | \nString | \nurl, email, tel, number | \n
| validator | \nCustom validation, (don't forget to execute callback() when validation is successful, otherwise validation will not return) | \nFunction(rule,value,callback) | \n\n |
| trigger | \nName of the event that triggered the check | \nString/Array | \nonChange/onBlur/... | \n
| message | \nerror message | \nString | \n\n |
react hook for field.watch
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}\nSupports controlled mode (value+onChange) Must\n - value control component data display\n - onChange callback function when the component changes (the first parameter can be given to value)
One complete operation throws an onChange event\n For example, there is a process that indicates the status of the progress, it is recommended to increase the API onProcess; if there is a Start indicates the startup state, it is recommended to increase the API onStart
Clear data when value={undefined}, field's reset function will send undefined data to all components
componentWillReceiveProps(nextProps) {\n if ('value' in nextProps ) {\n this.setState({\n value: nextProps.value === undefined? []: nextProps.value // set value after clear\n })\n }\n}\nthis.field.validate manually? A: Is it safe to define the validator method to ensure that the callback can be executed on any branch?