@alifd/field v1.7.0

Field

• category: Components
• family: DataEntry
• chinese: 表单辅助工具
• cols: 1
• type: 表单

Development Guide

When to use

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.

Use caution

• With Field init 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.
• initValue The defaultValue of a similar component, which only takes effect when the component first renders (the ajax asynchronous invocation setting initValue may have missed the first render)
• with parseName=true you could use getValues to get a struct value, but not work in getValue you still need pass complete key

basic use

Class Demo extends React.Component {
    Field = new Field(this); // instance creation

    onClick = ()=>{
        Console.log(this.field.getValue('name'));
    }
    Render() {
        Const init = this.field.init;

        // Note: initValue will only be assigned when the component is first initialized. If you are using an asynchronous assignment, use setValue
        Return <div>
            <Input {...init('name',{initValue:'first value'})} />
            <button onClick={this.onClick>Get Data</button>
        </div>
    }
}

update data

Event Updates

Class Demo extends React.Component {
    Field = new Field(this);

    onClick = ()=>{
        this.field.setValue('name', 'newvalue'); // Assignment will automatically trigger render
    }
    Render() {
        Const init = this.field.init;

        Return <div>
            <Input {...init('name')} />
            <button onClick={this.onClick}>Settings</button>
        </div>
    }
}

props update

Class Demo extends React.Component {
    Field = new Field(this);

    // Set the data before the component is mounted (this can be replaced with initValue)
    componentWillMount() {
        this.field.setValue('name', 'init Name')
    }
    // Receive data from props
    componentWillReceiveProps(nextProps) {
        this.field.setValue('name', nextProps.name)
    }
    Render() {
        Const init = this.field.init;

        Return <div>
            <Input {...init('name')} />
        </div>
    }
}

ajax update

Class Demo extends React.Component {
    Field = new Field(this);

    onClick = ()=>{
        Ajax({
            Url:'/demo.json',
            Success:(json)=>{
                // Update of assignment in callback event
                this.field.setValue('name',json.name);
            }
        });
    }
    Render() {
        Const init = this.field.init;

        Return <div>
            <Input {...init('name')} />
            <button onClick={this.onClick}>Settings</button>
        </div>
    }
}

onChange update monitoring

Two usages: 1. Unified management

Class Demo extends React.Component {
    Field = new Field(this,{
        onChange:(name, value) => {
          Switch(name) {
            Case 'name1':
              this.field.setValue('name2','value set by name1');
              Break;
            Case 'name2':
              this.field.setValue('name1','value set by name2');
              Break;
          }
        }
    });
    Render() {
        Const init = this.field.init;

        Return <div>
          <Input {...init('name1')} />
          <Input {...init('name2')} />
        </div>
    }
}

2. Individual management

Class Demo extends React.Component {
    Render() {
        Const init = this.field.init;

        Return <div>
          <Input {...init('name1',{
              Props:{
                onChange:(v)=>{
                  this.field.setValue('name2','value set by name1');
                }
              }
            })} />
          <Input {...init('name2',{
              Props:{
                onChange:(v)=>{
                  this.field.setValue('name1','value set by name2');
                }
              }
            })} />
        </div>
    }
}

For details, please check Demo Demo Associate Control

API

initialization

Let myfield = new Field(this [,options]);

options configuration item

API Interface

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)

init

init(name, options, props)

return

{id,value,onChange}

rules

{
    rules:[{ required: true }]
}

multiple rule

{
    rules:[{required:true,trigger:'onBlur'},{pattern:/abcd/,message:'match abcd'},{validator:(rule, value, callback)=>{callback('got error')}}]
}

Custom Component Access to Field Standards

• Supports controlled mode (value+onChange) Must      - value control component data display      - onChange callback function when the component changes (the first parameter can be given to value)

• One complete operation throws an onChange event      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) {
    if ('value' in nextProps ) {
        this.setState({
           value: nextProps.value === undefined? []: nextProps.value   //  set value after clear
        })
    }
}

afterValidateRerender

afterValidateRerender receives an object with the following properties

Known Issues

• Why doesn't the callback function enter the this.field.validate manually? A: Is it safe to define the validator method to ensure that the callback can be executed on any branch?