Field 表单辅助工具

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @alifd/next@latest -S

开发指南

何时使用

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

使用注意

  • 使用Field init 过的组件, value onChange 必须放在 init 的第三个参数, 否则有可能被 init 覆盖。

  • Form已经和Field 在数据获取和自动校验提示方面做了深度优化，建议在Form中使用Field, 请查看 Form demo。

  • initValue 类似组件的 defaultValue 只有在组件第一次render的时候才生效(ajax 异步调用设置 initValue 可能已经错过了第一次render)

  • autoUnmount 默认打开的，如果需要保留会 自动卸载的组件 数据请关闭此项

  • parseName=true 可以通过 getValues 获取到结构化的数据, 但是 getValue 还是必须传完整 key 值

基本使用

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

更新数据

事件更新

  1. class Demo extends React.Component {
  2.     field = new Field(this);
  4.     onClick = ()=>{
  5.         this.field.setValue('name', 'newvalue');    // 赋值会自动触发render
  6.     }
  7.     render() {
  8.         const init = this.field.init;
  10.         return <div>
  11.             <Input {...init('name')} />
  12.             <button onClick={this.onClick}>设置数据</button>
  13.         </div>
  14.     }
  15. }

props更新

  1. class Demo extends React.Component {
  2.     field = new Field(this);
  4.     // 在组件挂载之前把数据设置进去(可以用initValue替代这种用法)
  5.     componentWillMount() {
  6.         this.field.setValue('name', 'init Name')
  7.     }
  8.     // 接收来自props的数据
  9.     componentWillReceiveProps(nextProps) {
  10.         this.field.setValue('name', nextProps.name)
  11.     }
  12.     render() {
  13.         const init = this.field.init;
  15.         return <div>
  16.             <Input {...init('name')} />
  17.         </div>
  18.     }
  19. }

ajax更新

  1. class Demo extends React.Component {
  2.     field = new Field(this);
  4.     onClick = ()=>{
  5.         Ajax({
  6.             url:'/demo.json',
  7.             success:(json)=>{
  8.                 // 回调事件中赋值更新
  9.                 this.field.setValue('name',json.name);
  10.             }
  11.         });
  12.     }
  13.     render() {
  14.         const init = this.field.init;
  16.         return <div>
  17.             <Input {...init('name')} />
  18.             <button onClick={this.onClick}>设置数据</button>
  19.         </div>
  20.     }
  21. }

onChange更新监控

两种用法：1. 统一管理

  1. class Demo extends React.Component {
  2.     field = new Field(this,{
  3.         onChange:(name, value) => {
  4.           switch(name) {
  5.             case 'name1':
  6.               this.field.setValue('name2','value set by name1');
  7.               break;
  8.             case 'name2':
  9.               this.field.setValue('name1','value set by name2');
  10.               break;
  11.           }
  12.         }
  13.     });
  14.     render() {
  15.         const init = this.field.init;
  17.         return <div>
  18.           <Input {...init('name1')} />
  19.           <Input {...init('name2')} />
  20.         </div>
  21.     }
  22. }
  • 各自管理
  1. class Demo extends React.Component {
  2.     render() {
  3.         const init = this.field.init;
  5.         return <div>
  6.           <Input {...init('name1',{
  7.               props:{
  8.                 onChange:(v)=>{
  9.                   this.field.setValue('name2','value set by name1');
  10.                 }
  11.               }
  12.             })} />
  13.           <Input {...init('name2',{
  14.               props:{
  15.                 onChange:(v)=>{
  16.                   this.field.setValue('name1','value set by name2');
  17.                 }
  18.               }
  19.             })} />
  20.         </div>
  21.     }
  22. }

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

API

初始化

  1. let myfield = new Field(this [,options]);
参数说明类型可选值默认值
this传入调用class的thisReact.Component必须设置
options一些事件配置, 详细参数如下Object非必须

options 配置项

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

API接口

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

参数说明类型可选值默认值
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[]], options: Object, callback: Function(errors, values))
getError获取单个输入控件的 ErrorFunction(name: String)
getErrors获取一组输入控件的 ErrorFunction(name: String)
setError设置单个输入控件的 ErrorFunction(name: String, errors:String/ArrayString)
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[])
spliceArray删除 name 是数组格式的数据, 并且自动处理其他 name 的数组错位问题Function(keyMatch: String, index: Number)

init

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

返回值

  1. {id,value,onChange}

rules

  1. {
  2.     rules:[{ required: true }]
  3. }

多个rule

  1. {
  2.     rules:[{required:true,trigger:'onBlur'},{pattern:/abcd/,message:'abcd不能缺'},{validator:(rule, value, callback)=>{callback('出错了')}}]
  3. }
参数说明类型可选值使用类型
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(),否则会校验不返回)Function(rule,value,callback)
trigger触发校验的事件名称String/ArrayonChange/onBlur/…onChange
message出错时候信息String

自定义组件接入Field标准

  • 支持受控模式(value+onChange) 必须

    • value 控制组件数据展现

    • onChange 组件发生变化时候的回调函数（第一个参数可以给到value)

  • 一次完整操作抛一次onChange事件 建议 比如有Process表示进展中的状态，建议增加API onProcess；如果有Start表示启动状态，建议增加API onStart

  • value={undefined}的时候清空数据, field 的 reset 函数会给所有组件下发 undefined 数据 建议

  1. componentWillReceiveProps(nextProps) {
  2.     if ('value' in nextProps ) {
  3.         this.setState({
  4.            value: nextProps.value === undefined? []: nextProps.value   //  设置组件的被清空后的数值
  5.         })
  6.     }
  7. }

已知问题

  • 为何手动调用this.field.validate的时候进不了回调函数？ 答: 是不是自定义了validator方法,确保callback在任何分支下都能被执行到。

代码示例

基本

getValue setValue reset 的使用

Field 表单辅助工具 - 图1

查看源码在线预览

  1. import { Input, Button, Field } from '@alifd/next';
  5. class App extends React.Component {
  6.     field = new Field(this);
  8.     onGetValue() {
  9.         console.log(this.field.getValue('input'));
  10.     }
  12.     render() {
  13.         const { init, setValue, reset } = this.field;
  15.         return (<div className="demo">
  16.             <Input {...init('input', {initValue: 'test'})} />
  17.             <br/><br/>
  18.             <Button type="primary" onClick={this.onGetValue.bind(this)}>getValue</Button>
  19.             <Button type="primary" onClick={() => setValue('input', 'set me by click')}>setValue</Button>
  20.             <Button onClick={() => reset()}>reset</Button>
  21.         </div>);
  22.     }
  23. }
  26. ReactDOM.render(<App/>, mountNode);
  1. .demo .next-btn {
  2.     margin-right: 5px;
  3. }

关联控制

组件之间的关联控制. onChange 统一管理。

Field 表单辅助工具 - 图2

查看源码在线预览

  1. import { Input, Select, Range, Field } from '@alifd/next';
  5. class App extends React.Component {
  6.     field = new Field(this, {
  7.         onChange: (name, value) => {
  8.             console.log(this.field.getValues());
  10.             switch (name) {
  11.                 case 'input':
  12.                     this.field.setValue('sync', `change to: ${value}`);
  13.                     break;
  14.                 case 'select':
  15.                     this.field.setValue('sync', `${value} is coming`);
  16.                     break;
  17.                 case 'range':
  18.                     this.field.setValue('sync', ` (${value.join(',')}) ready`);
  19.                     break;
  20.             }
  21.         }
  22.     });
  24.     render() {
  25.         const {init, getValue} = this.field;
  26.         const layout = {
  27.             marginBottom: 10,
  28.             width: 400
  29.         };
  31.         return (<div>
  32.             <Input placeholder="controlled by onChange" {...init('input')} style={layout}/><br/>
  33.             <Input placeholder="under control" {...init('input')} style={layout}/><br/>
  35.             <Select style={layout} {...init('select', {initValue: 'lucy'})}>
  36.                 <Select.Option value="jack">jack</Select.Option>
  37.                 <Select.Option value="lucy">lucy</Select.Option>
  38.                 <Select.Option value="disabled" disabled>disabled</Select.Option>
  39.                 <Select.Option value="hugo">hugo</Select.Option>
  40.             </Select><br/>
  42.             {
  43.                 getValue('select') !== 'hugo' ?
  44.                     <Range
  45.                         style={{...layout, marginTop: 30}}
  46.                         slider={'double'} scales={10} marks={10}
  47.                         {...init('range', {initValue: [20, 40], trigger: 'onProcess'})}
  48.                     /> : null
  49.             }
  50.             <br/>
  52.             <hr style={{marginBottom: 10}}/>
  53.             <Input placeholder="everyone can control me" {...init('sync')} style={layout}/><br/>
  54.         </div>);
  55.     }
  56. }
  58. ReactDOM.render(<App/>, mountNode);

自定义返回值

通过 getValueFromEvent 自定义从组件的 Event 获取 value 的方式

Field 表单辅助工具 - 图3

查看源码在线预览

  1. import { Button, Input, Field } from '@alifd/next';
  4. class App extends React.Component {
  6.     field = new Field(this);
  8.     normFile(list) {
  9.         if (Array.isArray(list)) {
  10.             return list;
  11.         }
  12.         return list && list.fileList;
  13.     }
  15.     normDate(date, strdate) {
  16.         console.log('normDate:', date, strdate);
  17.         return strdate;
  18.     }
  20.     render() {
  21.         const init = this.field.init;
  23.         return (<div>
  24.             <Input {...init('name', { getValueFromEvent: (value) => {
  25.                 if (value.match(/##/)) {
  26.                     return value;
  27.                 } else {
  28.                     return `## title-${value}`;
  29.                 }
  30.             }})} />
  31.             <Button type="primary" onClick={() => {
  32.                 console.log(this.field.getValues());
  33.             }}>getValues</Button>
  34.         </div>);
  35.     }
  36. }
  39. ReactDOM.render(<App/>, mountNode);

自定义错误

自己控制组件的errors

Field 表单辅助工具 - 图4

查看源码在线预览

  1. import { Input, Button, Field } from '@alifd/next';
  5. class App extends React.Component {
  6.     field = new Field(this);
  8.     validate = () => {
  9.         console.log(this.field.getErrors());
  10.       this.field.validate((error, values) => {
  11.         // eslint-disable-next-line no-alert
  12.         alert(JSON.stringify(error));
  13.       });
  14.     };
  16.     render() {
  17.         const { init, getError, setError, setErrors } = this.field;
  18.         return (<div className="demo">
  19.             <Input {...init('input', {
  20.                 rules: [{
  21.                     required: true,
  22.                     pattern: /hello/,
  23.                     message: 'must be hello'
  24.                 }]
  25.             })} /><br/>
  26.             <span style={{color: 'red'}}>{getError('input')}</span>
  28.             <br/>
  29.             <Button onClick={() => {
  30.                 setError('input', 'set error 1');
  31.             }}>setError</Button>
  33.             <Button onClick={() => {
  34.                 setErrors({input: 'set error 2'});
  35.             }}>setErrors</Button>
  37.             <Button onClick={() => {
  38.                 setErrors({input: ''});
  39.             }}>clear</Button>
  41.             <br/><br/>
  42.             <Input {...init('input2')} /><br/>
  43.             <span style={{color: 'red'}}>{getError('input2')}</span><br/>
  45.             <Button onClick={() => {
  46.                 setError('input2', 'errors will be removed by onChange and shown on validate');
  47.             }}>setError</Button>
  49.             <Button onClick={this.validate}>
  50.             validate</Button>    
  51.         </div>);
  52.     }
  53. }
  56. ReactDOM.render(<App/>, mountNode);
  1. .demo .next-btn {
  2.     margin-right: 5px;
  3. }

校验

校验的错误信息需要用getError获取

注意：Form 和 Field 做了深度结合，在 Form 中使用Field，错误信息不需getError获取会自动展现。

Field 表单辅助工具 - 图5

查看源码在线预览

  1. import { Input, Button, Checkbox, Field } from '@alifd/next';
  5. const CheckboxGroup = Checkbox.Group;
  7. const list = [
  8.     {
  9.         value: 'apple',
  10.         label: 'apple'
  11.     }, {
  12.         value: 'pear',
  13.         label: 'pear'
  14.     }, {
  15.         value: 'orange',
  16.         label: 'orange'
  17.     }
  18. ];
  20. class App extends React.Component {
  21.     state = {
  22.         checkboxStatus: true
  23.     }
  24.     field = new Field(this, {scrollToFirstError: -10});
  26.     isChecked(rule, value, callback) {
  27.         if (!value) {
  28.             return callback('consent agreement not checked ');
  29.         } else {
  30.             return callback();
  31.         }
  32.     }
  34.     userName(rule, value, callback) {
  35.         if (value === 'frank') {
  36.             setTimeout(() => callback('name existed'), 200);
  37.         } else {
  38.             setTimeout(() => callback(), 200);
  39.         }
  40.     }
  42.     render() {
  43.         const init = this.field.init;
  45.         return (<div className="demo">
  46.             <Input {...init('input', {initValue: 'delete all', rules: {required: true}})} />
  47.             {this.field.getError('input') ?
  48.                 <span style={{color: 'red'}}>{this.field.getError('input').join(',')}</span> : ''}
  50.             <br/>
  51.             <br/>
  53.             <Input placeholder="try onBlur" {...init('input1', {
  54.                 rules: [{
  55.                     required: true,
  56.                     message: 'can not be empty',
  57.                     trigger: ['onBlur', 'onChange']
  58.                 }]
  59.             })} />
  60.             {this.field.getError('input1') ?
  61.                 <span style={{color: 'red'}}>{this.field.getError('input1').join(',')}</span> : ''}
  63.             <br/>
  64.             <br/>
  66.             <Input defaultValue="" placeholder="try frank" {...init('username', {
  67.                 rules: [{
  68.                     validator: this.userName,
  69.                     trigger: ['onBlur', 'onChange']
  70.                 }]
  71.             })} />
  72.             {this.field.getState('username') === 'loading' ? 'validating...' : ''}
  73.             {this.field.getError('username') ?
  74.                 <span style={{color: 'red'}}>{this.field.getError('username').join(',')}</span> : ''}
  76.             <br/>
  77.             <br/>
  79.             agreement:
  80.             <Checkbox {...init('checkbox', {
  81.                 valueName: 'checked',
  82.                 rules: [{validator: this.isChecked}]
  83.             })} />
  84.             {this.field.getError('checkbox') ?
  85.                 <span style={{color: 'red'}}>{this.field.getError('checkbox').join(',')}</span> : ''}
  87.             <br/>
  88.             <br/>
  90.             <Input.TextArea placeholder=">3 and <10" {...init('textarea', {
  91.                 rules: [{
  92.                     required: true,
  93.                     minLength: 3,
  94.                     maxLength: 10
  95.                 }]
  96.             })} />
  97.             {this.field.getError('textarea') ?
  98.                 <span style={{color: 'red'}}>{this.field.getError('textarea').join(',')}</span> : ''}
  100.             <br/>
  101.             <br/>
  103.             {this.state.checkboxStatus ? <div>
  104.                 Array validate：
  105.                 <CheckboxGroup dataSource={list} {...init('checkboxgroup', {
  106.                     rules: [{
  107.                         required: true,
  108.                         type: 'array',
  109.                         message: 'choose one please'
  110.                     }]
  111.                 })} style={{marginBottom: 10}}/>
  112.                 {this.field.getError('checkboxgroup') ?
  113.                     <span style={{color: 'red'}}>{this.field.getError('checkboxgroup').join(',')}</span> : ''}
  114.             </div> : null}
  116.             <br/>
  117.             <br/>
  119.             <Button type="primary" onClick={() => {
  120.                 this.field.validate((errors, values) => {
  121.                     console.log(errors, values);
  122.                 });
  123.             }}>validate</Button>
  124.             <Button onClick={() => {
  125.                 this.field.reset();
  126.             }}>reset</Button>
  128.             <Button onClick={() => {
  129.                 if (this.state.checkboxStatus) {
  130.                     this.setState({checkboxStatus: false});
  131.                     this.field.remove('checkboxgroup');
  132.                 } else {
  133.                     this.setState({checkboxStatus: true});
  134.                 }
  136.             }}>{this.state.checkboxStatus ? 'delete' : 'restore'}</Button>
  137.         </div>);
  138.     }
  139. }
  141. ReactDOM.render(<App/>, mountNode);
  1. .demo .next-btn {
  2.     margin-right: 5px;
  3. }

redux 中使用

在 redux 中使用, 在 componentWillReceiveProps 更新

Field 表单辅助工具 - 图6

查看源码在线预览

  1. import { Input, Button, Field } from '@alifd/next';
  4. import { combineReducers, createStore } from 'redux';
  5. import { Provider, connect } from 'react-redux';
  7. function formReducer(state = {email: 'frankqian@qq.com'}, action) {
  8.     switch (action.type) {
  9.         case 'save_fields':
  10.             return {
  11.                 ...state,
  12.                 ...action.payload
  13.             };
  14.         default:
  15.             return state;
  16.     }
  17. }
  19. class Demo extends React.Component {
  20.     componentWillReceiveProps(nextProps) {
  21.         this.field.setValues({
  22.             email: nextProps.email,
  23.             newlen: nextProps.email.length
  24.         });
  25.     }
  27.     field = new Field(this, {
  28.         onChange: (name, value) => {
  29.             console.log('onChange', name, value);
  30.             this.field.setValue('newlen', value.length);
  31.             this.props.dispatch({
  32.                 type: 'save_fields',
  33.                 payload: {
  34.                     [name]: value
  35.                 }
  36.             });
  37.         }
  38.     });
  40.     setEmail() {
  41.         this.props.dispatch({
  42.             type: 'save_fields',
  43.             payload: {
  44.                 email: 'qq@gmail.com'
  45.             }
  46.         });
  47.     }
  50.     render() {
  51.         const init = this.field.init;
  53.         const newLen = init('newlen', { initValue: this.props.email.length });
  55.         return (<div>
  56.             <Input {...init('email', { initValue: this.props.email }, {
  57.                 rules: [
  58.                     {required: true, type: 'email', message: 'at least 5 chars'}
  59.                 ]
  60.             })} />
  61.             now length is:{newLen.value}
  62.             <p>email: {this.props.email}</p>
  63.             <Button onClick={this.setEmail.bind(this)}>set</Button>
  64.         </div>);
  65.     }
  66. }
  69. const ReduxDemo = connect((state) => {
  70.     return {
  71.         email: state.formReducer.email
  72.     };
  73. })(Demo);
  76. const store = createStore(combineReducers({
  77.     formReducer
  78. }));
  80. ReactDOM.render((<Provider store={store}>
  81.     <div>
  82.         <ReduxDemo />
  83.     </div>
  84. </Provider>), mountNode);

自动卸载

autoUnmount 默认为 true，当组件被 unmount 的时候会自动删除数据. autoUnmount 设置为 false 后，会一直保存数据.

Field 表单辅助工具 - 图7

查看源码在线预览

  1. import { Input, Button, Field } from '@alifd/next';
  4. class Demo extends React.Component {
  5.     state = {
  6.         show: true,
  7.         show2: true
  8.     }
  9.     field = new Field(this);
  10.     field2 = new Field(this, { autoUnmount: false });
  12.     render() {
  13.         return (
  14.             <div>
  15.                 {this.state.show ? < Input {...this.field.init('name', { initValue: 'autoUnmount = true' })} /> : null}
  16.                 <Button
  17.                     onClick={() => {
  18.                         console.log('value auto delete', this.field.getValues());
  19.                     }}
  20.                     style={{marginLeft: 4}}
  21.                 >
  22.                     print
  23.                 </Button>
  24.                 <Button
  25.                     onClick={() => this.setState({ show: false })}
  26.                     warning
  27.                     style={{marginLeft: 4}}
  28.                 >
  29.                     delete
  30.                 </Button>
  31.                 <br />
  32.                 <br />
  33.                 {this.state.show2 ? < Input {...this.field2.init('name2', { initValue: 'autoUnmount = false' })} /> : null}
  34.                 <Button
  35.                     onClick={() => {
  36.                         console.log('value always exist', this.field2.getValues());
  37.                     }}
  38.                     style={{marginLeft: 4}}
  39.                 >
  40.                     print
  41.                 </Button>
  42.                 <Button
  43.                     onClick={() => this.setState({ show2: false })}
  44.                     warning
  45.                     style={{marginLeft: 4}}
  46.                 >
  47.                     delete
  48.                 </Button>
  49.             </div>
  50.         );
  51.     }
  52. }
  54. ReactDOM.render(<Demo />, mountNode);

动态表格

通过 spliceArray 可以删除数组格式 name (eg: name.{index}) 的数据, 并且自动订正其他 name 的 index - 1 问题

Field 表单辅助工具 - 图8

查看源码在线预览

  1. import { Button, Input, Table, Field } from '@alifd/next';
  4. class Demo extends React.Component {
  5.     constructor(props) {
  6.         super(props);
  8.         this.state = {
  9.             tableSource: [1, 2, 3].map(i => {
  10.                 return { id: i };
  11.             })
  12.         };
  13.         this.idx = 3;
  15.         this.field = new Field(this, {
  16.             parseName: true,
  17.         });
  18.     }
  20.     getValues = () => {
  21.         const values = this.field.getValues();
  22.         console.log(values);
  23.     }
  25.     add = () => {
  26.         const { tableSource } = this.state;
  27.         tableSource.push({
  28.             id: ++this.idx
  29.         });
  31.         this.setState({ tableSource });
  32.     }
  34.     removeItem(index) {
  35.         const { tableSource } = this.state;
  36.         tableSource.splice(index, 1);
  37.         this.field.spliceArray('name.{index}', index);
  38.         this.setState({ tableSource });
  39.     }
  41.     input = (value, index) => <Input  {...this.field.init(`name.${index}`, { initValue: index })} />;
  42.     delete = (value, index) => <Button warning onClick={this.removeItem.bind(this, index)}>delete</Button>;
  44.     render() {
  45.         return (
  46.             <div>
  47.                 <Table dataSource={this.state.tableSource}>
  48.                     <Table.Column title="id" dataIndex="id" />
  49.                     <Table.Column title="input" dataIndex="id" cell={this.input} />
  50.                     <Table.Column title="operation" cell={this.delete} width={100} />
  51.                 </Table>
  52.                 <div style={{ marginTop: 10 }}>
  53.                     <Button type="primary" onClick={this.getValues} >print</Button>
  54.                     <Button type="normal" onClick={this.add} style={{ marginLeft: 8 }}>Add</Button>
  55.                 </div>
  56.             </div>
  57.         );
  58.     }
  59. }
  61. ReactDOM.render(<Demo />, mountNode);

组合使用

多组件混合使用

Field 表单辅助工具 - 图9

查看源码在线预览

  1. import { Button, Checkbox, Input, Radio, Select, Range, DatePicker, TimePicker, Field } from '@alifd/next';
  4. const CheckboxGroup = Checkbox.Group;
  5. const RadioGroup = Radio.Group;
  7. const list = [
  8.     {
  9.         value: 'apple',
  10.         label: 'apple'
  11.     }, {
  12.         value: 'pear',
  13.         label: 'pear'
  14.     }, {
  15.         value: 'orange',
  16.         label: 'orange'
  17.     }
  18. ];
  19. const layout = {
  20.     marginBottom: 10,
  21.     width: 400
  22. };
  24. class App extends React.Component {
  25.     field = new Field(this);
  27.     render() {
  28.         const {init, getValue} = this.field;
  30.         return (<div className="demo">
  31.             <div style={{marginBottom: 10}}>
  32.                 <RadioGroup {...init('radiogroup', {initValue: 'a'})} >
  33.                     <Radio value="a">A</Radio>
  34.                     <Radio value="b">B</Radio>
  35.                     <Radio value="c">C</Radio>
  36.                     <Radio value="d">D</Radio>
  37.                 </RadioGroup>
  38.             </div>
  40.             {
  41.                 getValue('radiogroup') !== 'd' ?
  42.                     <Select {...init('name', {initValue: 'lucy'})} style={layout}>
  43.                         <Select.Option value="jack">jack</Select.Option>
  44.                         <Select.Option value="lucy">lucy</Select.Option>
  45.                         <Select.Option value="disabled" disabled>disabled</Select.Option>
  46.                         <Select.Option value="hugohua">hugohua</Select.Option>
  47.                     </Select> :
  48.                     <Input {...init('name', {initValue: 'frankqian'})} />
  49.             }
  50.             <br/>
  52.             <Range style={{...layout, marginTop: 30}} slider={'double'} scales={10}
  53.                 marks={10} {...init('range', {initValue: [20, 40]})}/>
  55.             <div style={{marginBottom: 10}}>
  56.                 <CheckboxGroup dataSource={list} {...init('checkboxgroup', {initValue: ['apple']})} />
  57.             </div>
  58.             <div style={{marginBottom: 10}}>
  59.                 <DatePicker {...init('datepicker')}/>
  60.             </div>
  61.             <div style={{marginBottom: 10}}>
  62.                 <DatePicker.RangePicker {...init('rangepicker')}/>
  63.             </div>
  64.             <div style={{marginBottom: 10}}>
  65.                 <TimePicker {...init('timepicker')}/>
  66.             </div>
  67.             <Button type="primary" onClick={() => {
  68.                 console.log(this.field.getValues());
  69.             }}>getValues</Button>
  70.             <Button onClick={() => {
  71.                 this.field.setValues({
  72.                     name: 'hugohua',
  73.                     range: [30, 50],
  74.                     checkboxgroup: ['orange'],
  75.                     radiogroup: 'd'
  76.                 });
  77.             }}>setValues</Button>
  78.             <Button onClick={() => {
  79.                 this.field.reset();
  80.             }}>reset</Button>
  81.         </div>);
  82.     }
  83. }
  86. ReactDOM.render(<App/>, mountNode);
  1. .demo .next-btn {
  2.     margin-right: 5px;
  3. }

自定义受控字段

valueName 的默认值为 value，如果为其他需要用 valueName 指定

Field 表单辅助工具 - 图10

查看源码在线预览

  1. import { Button, Checkbox, Radio, Switch, Field } from '@alifd/next';
  5. class App extends React.Component {
  7.     field = new Field(this);
  9.     render() {
  10.         const init = this.field.init;
  12.         return (<div className="demo">
  13.             <Radio {...init('radio', {initValue: false, valueName: 'checked'})} > checked</Radio>
  14.             <br/>
  15.             <Checkbox {...init('checkbox', {valueName: 'checked', initValue: true})} >
  16.                 defaultChecked
  17.             </Checkbox>
  18.             <br/>
  19.             <Switch {...init('switch', {valueName: 'checked', initValue: false})}
  20.                 style={{marginTop: 10, marginBottom: 10}}/>
  21.             <br/>
  23.             <Button type="primary" onClick={() => {
  24.                 console.log(this.field.getValues());
  25.             }}>getValues</Button>
  26.             <Button onClick={() => {
  27.                 this.field.setValues({
  28.                     radio: true,
  29.                     switch: true,
  30.                     checkbox: false
  31.                 });
  32.             }}> setValues </Button>
  33.             <Button onClick={() => {
  34.                 this.field.reset();
  35.             }}>reset</Button>
  36.         </div>);
  37.     }
  38. }
  40. ReactDOM.render(<App/>, mountNode);
  1. .demo .next-btn {
  2.     margin-right: 5px;
  3. }

自定义组件

自己的组件如何接入Field。

最低标准: 组件支持 onChange 读取组件数据。达到效果：Field 可以 getValue，但是 setValue 无效

完全支持: 组件支持受控， 也就是支持两个api：value onChange. value: 设置组件的数据; onChange: 在组件修改的时候在第一个数暴露数据

Field 表单辅助工具 - 图11

查看源码在线预览

  1. import { Button, Field } from '@alifd/next';
  4. class Custom extends React.Component {
  5.     constructor(props) {
  6.         super(props);
  8.         this.state = {
  9.             value: typeof props.value === 'undefined' ? [] : props.value
  10.         };
  11.     }
  13.     // update value
  14.     componentWillReceiveProps(nextProps) {
  15.         if ('value' in nextProps) {
  16.             this.setState({
  17.                 value: typeof nextProps.value === 'undefined' ? [] : nextProps.value
  18.             });
  19.         }
  20.     }
  22.     onAdd = () => {
  23.         const value = this.state.value.concat([]);
  24.         value.push('new');
  26.         this.setState({
  27.             value
  28.         });
  29.         this.props.onChange(value);
  30.     }
  32.     render() {
  33.         return (<div className="custom">
  34.             {this.state.value.map((v, i) => {
  35.                 return <Button key={i} >{v}</Button>;
  36.             })}
  37.             <Button type="primary" onClick={this.onAdd.bind(this)}>Add ＋ </Button>
  38.         </div>);
  39.     }
  40. }
  42. /* eslint-disable react/no-multi-comp */
  43. class App extends React.Component {
  44.     field = new Field(this, {
  45.         deepReset: true
  46.     });
  48.     onGetValue() {
  49.         console.log(this.field.getValue('custom'));
  50.     }
  52.     render() {
  53.         const { init, setValue, reset } = this.field;
  55.         return (<div className="demo">
  56.             <Custom {...init('custom', {initValue: ['test']})} />
  58.             <br/><br/>
  60.             <Button type="primary" onClick={this.onGetValue.bind(this)}>getValue</Button>
  61.             <Button type="primary" onClick={() => setValue('custom', ['test', 'setValue'])}>setValue</Button>
  62.             <Button onClick={() => reset()}>reset</Button>
  63.         </div>);
  64.     }
  65. }
  66. ReactDOM.render(<App/>, mountNode);
  1. .demo .next-btn {
  2.     margin-right: 5px;
  3. }
  4. .custom {
  5.     border: 1px dashed;
  6.     padding: 4px;
  7.     display: inline-block;
  8. }
  9. .custom span {
  10.     border: 1px solid green;
  11.     padding: 0px 5px;
  12.     height: 24px;
  13.     display: inline-block;
  14.     margin-right: 2px;
  15. }

结构化解析

把 init('obj.b') 的数据转换成 obj={obj:{b:'value'}}；

把 init('arr.0') 的数据转换成 obj={arr:['']}；

Field 表单辅助工具 - 图12

查看源码在线预览

  1. import { Input, Button, Field } from '@alifd/next';
  5. class App extends React.Component {
  6.     field = new Field(this, {
  7.         parseName: true,
  8.         values: {
  9.             objWithDefaults: {
  10.                 a: 1,
  11.                 b: 2
  12.             }
  13.         }
  14.     });
  16.     onGetValue() {
  17.         console.log(this.field.getValues());
  18.     }
  20.     onSetValue() {
  21.         this.field.setValues({
  22.             obj: {
  23.                 b: 'b',
  24.                 c: 'c'
  25.             },
  26.             arr: ['first', 'second']
  27.         });
  28.     }
  30.     render() {
  31.         const { init, reset, resetToDefault } = this.field;
  33.         return (<div className="demo">
  34.             <h3>Object transfer</h3>
  35.             obj.b: <Input {...init('obj.b', {initValue: 'test1'})} /> &nbsp;
  36.             obj.c: <Input {...init('obj.c', {initValue: 'test2'})} />
  38.             <br/>
  40.             <h3>Array transfer</h3>
  41.             arr.0: <Input {...init('arr.0', {initValue: '0'})} /> &nbsp;
  42.             arr.1: <Input {...init('arr.1', {initValue: '1'})} />
  43.             <br/><br/>
  45.             <h3>Object with Defaults</h3>
  46.             objWithDefaults.a: <Input {...init('objWithDefaults.a')} /> &nbsp;
  47.             objWithDefaults.b: <Input {...init('objWithDefaults.b')} />
  48.             <br/><br/>
  50.             result:
  51.             <pre>{JSON.stringify(this.field.getValues(), null, 2)}</pre>
  53.             <br/><br/>
  55.             <Button type="primary" onClick={this.onGetValue.bind(this)}>getValues</Button>
  56.             <Button onClick={this.onSetValue.bind(this)}>setValues</Button>
  57.             <Button onClick={() => reset()}>reset</Button>
  58.             <Button onClick={() => resetToDefault()}>resetToDefault</Button>
  59.         </div>);
  60.     }
  61. }
  64. ReactDOM.render(<App/>, mountNode);
  1. .demo .next-btn {
  2.     margin-right: 5px;
  3. }

相关区块

Field 表单辅助工具 - 图13

暂无相关区块