FormBinder ICE 表单粘合剂

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @icedesign/form-binder@1.0.3 -S

ICE 表单数据获取方案。

说明：1. 如果使用的是 FormBinder 0.x 的版本，请移步到 0.x 参考文档。2. 如果使用的是 FormBinder 1.x 的版本，需要确保依赖的 react 版本在 16.2.0 以上，1.x 版本使用了 React.Fragments API，支持 FormBinderWrapper 组件返回多个节点。

安装和升级

  1. npm install @icedesign/form-binder

表单功能

  • 表单双向绑定

  • 表单值统一处理

  • 布局自由组合

  • 对数据的有效性进行验证

表单元素

表单元素指的是 ICE 基础组件以及业务组件中的 Input 、 Checkbox 、 Select 、 Range 、 DatePicker 、 TimePicker 、 NumberPicker 、 Switch 、 Upload 等以及用户自定义的组件，它能够响应 onChange 等用来获取用户输入

参数（Props）

方法名说明类型默认值
validateFields校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件([fieldNames: string[]],callback(errors,values)) => void

FormBinderWrapper

整个表单的容器，支持传入 value 和 onChange 等属性，其中 value 会作为整个表单数据根节点，交由下层组件去获取、更新操作

经过 FormBinderWrapper 包装的组件，数据传递和同步将被接管，这意味着：

  • 你不需要使用表单元素的 onChange 来做同步，但还是可以继续监听 onChange 等事件

  • 你不能使用组件的表单元素的 value、 defaultValue 等属性来设置表单元素的值，但可以通过初始的 value 进行设置

  • 你不需要通过 setState 来动态更新表单的值，因为表单默认支持双向数据通信，但可以通过 setFieldValue 和 getFieldValue 来设置或者更新表单域的值

参数（Props）

属性参数说明类型默认值
value表单值object{}
onChange任一表单域的值发生改变时的回调function(value)() => {}
enableScrollErrorField全局校验时，是否开启滚动到报错表单位置booleanfalse
scrollErrorFieldTopOffset全局校验滚动到报错位置时，距离顶部的偏移值（适用于头部 fixed 的场景）number0

FormBinder

表单组件粘合剂，将其作为 FormBinderWrapper 的子组件，即可实现双向绑定特性，之后表单域的改变会通过 FormBinder 转发从而响应到 FormBinderWrapper 的 onChange 方法进行通信

FormBinder 支持的属性包含以下两部分：

  • 自定义规则

  • 检验规则

自定义规则

参数（Props）

属性参数说明类型默认值
rules校验规则，参考下方文档object[]
name​表单域名称string
setFieldValue设置一个输入控件的值Function(fieldName: string)
getFieldValue获取一个输入控件的值Function(fieldName: string)
triggerType指定合适的触发事件string'onChange'

校验规则

参数（Props）

参数说明类型默认值
enum枚举类型string
len字段长度number
max最大长度number
message校验文案string
min最小长度number
pattern正则表达式校验RegExp
required是否必选booleanfalse
transform校验前转换字段值function(value) => transformedValue:any
type内建校验类型string'string'
validator自定义校验function(rule, value, callback)
whitespace必选时，空格是否会被视为错误booleanfalse

内建校验类型，可选项自定义校验（注意，callback 必须被调用）

推荐：

  • 建议统一使用 async-validator 的校验规则，尽量不要使用表单元素的相关检验属性，这样做有利于代码的可维护性和优雅。

  • 内建校验类型，可选项。

  • 更多高级用法可参考 async-validator。

FormError

自定义表单的报错信息，自定义报错信息时需要指定 name，以此来获取当前报错的表单域来源

参数（Props）

参数说明类型默认值
name​表单域名称string
style自定义样式对象object
className自定义样式类名string
render自定义渲染报错的组件和处理逻辑Function(errors):ReactNode

双向绑定协议

双向绑定协议指的是组件接收 value 和 onChange 两个参数，其用户输入值由 value 提供，当用户操作组件导致数据变更，组件会调用 onChange 并把新的 value 作为第一个参数传出。React 社区的大多数组件都遵守这个设计，如 @icedesign/base 的 Input, Select, Checkbox 等，如果你希望你的表单类组件能够接入 FormBinder ，请务必遵守这个协议。

代码示例

登录表单

普通的登录表单，可以自由组合布局，自定义排列标签和表单域

FormBinder ICE 表单粘合剂 - 图1

查看源码在线预览

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { FormBinderWrapper, FormBinder, FormError } from '@icedesign/form-binder';
  4. import { Input, Button, Checkbox, Feedback } from '@icedesign/base';
  6. class Login extends Component {
  7.   constructor(props) {
  8.     super(props);
  10.     this.state = {
  11.       value: {
  12.         username: '',
  13.         password: '',
  14.         checkbox: false
  15.       }
  16.     };
  17.   }
  19.   formChange = value => {
  20.     // 说明：
  21.     //  1. 表单是双向通行的，所有表单的响应数据都会同步更新 value
  22.     //  2. 这里 setState 只是为了实时展示当前表单数据的演示使用
  23.     this.setState({ value });
  24.   };
  26.   validateFields = () => {
  27.     const { validateFields } = this.refs.form;
  29.     validateFields((errors, values) => {
  30.       console.log({ errors })
  32.       if (!errors) {
  33.         Feedback.toast.success('登录成功')
  34.       }
  35.     });
  36.   }
  38.   render() {
  39.     return (
  40.       <div style={styles.container}>
  41.         <FormBinderWrapper
  42.           value={this.state.value}
  43.           onChange={this.formChange}
  44.           ref="form"
  45.         >
  46.           <div style={styles.content}>
  47.             <div style={styles.formItem}>
  48.               <span style={styles.formItemLabel}>名称：</span>
  49.               <FormBinder name="username" required message="请输入正确的名称" >
  50.                 <Input /> 
  51.               </FormBinder>
  52.               <FormError style={styles.formItemError} name="username" />
  53.             </div>
  55.             <div style={styles.formItem}>
  56.               <span style={styles.formItemLabel}>密码：</span>
  57.               <FormBinder name="password" required message="请输入正确的密码">
  58.                 <Input htmlType="password" /> 
  59.               </FormBinder>
  60.               <FormError style={styles.formItemError} name="password" />
  61.             </div>
  63.             <div style={styles.formItem}>
  64.               <span style={styles.formItemLabel}>记住密码：</span>
  65.               <FormBinder
  66.                 name="checkbox"
  67.               >
  68.                 <Checkbox />
  69.               </FormBinder>
  70.             </div>
  72.             <Button type="primary" style={{width: '242px'}}  onClick={this.validateFields}>
  73.               登 录
  74.             </Button>
  75.           </div>
  76.         </FormBinderWrapper>
  78.         <div style={styles.preview}>
  79.           <strong>当前表单数据</strong>
  80.           <pre>{JSON.stringify(this.state.value, null, 2)}</pre>
  81.         </div>
  83.       </div>
  84.     );
  85.   }
  86. }
  88. const styles = {
  89.   formItem: {
  90.     marginBottom: '20px'
  91.   },
  92.   formItemLabel: {
  94.   },
  95.   formItemError: {
  96.     marginLeft: '10px',
  97.   },
  98.   preview: {
  99.     border: '1px solid #eee', 
  100.     marginTop: 20,
  101.     padding: 10
  102.   }
  103. }
  105. ReactDOM.render(<Login />, mountNode);

注册表单

普通的注册表单，展示多表单元素的组合，用户填写必须的信息才能注册新用户。

FormBinder ICE 表单粘合剂 - 图2

查看源码在线预览

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { FormBinderWrapper, FormBinder, FormError } from '@icedesign/form-binder';
  4. import { Input, Button, Checkbox, Feedback, CascaderSelect, Switch, DatePicker } from '@icedesign/base';
  6. const cityData = [
  7.   {
  8.     value: "2973",
  9.     label: "陕西",
  10.     children: [
  11.       {
  12.         value: "2974",
  13.         label: "西安",
  14.         children: [
  15.           { value: "2975", label: "西安市" },
  16.           { value: "2976", label: "高陵县" }
  17.         ]
  18.       },
  19.       {
  20.         value: "2980",
  21.         label: "铜川",
  22.         children: [
  23.           { value: "2981", label: "铜川市" },
  24.           { value: "2982", label: "宜君县" }
  25.         ]
  26.       }
  27.     ]
  28.   },
  29.   {
  30.     value: "3371",
  31.     label: "新疆",
  32.     children: [
  33.       {
  34.         value: "3430",
  35.         label: "巴音郭楞蒙古自治州",
  36.         children: [
  37.           { value: "3431", label: "库尔勒市" },
  38.           { value: "3432", label: "和静县" }
  39.         ]
  40.       }
  41.     ]
  42.   }
  43. ];
  45. class Register extends Component {
  46.   constructor(props) {
  47.     super(props);
  49.     this.state = {
  50.       value: {
  51.         email: '',
  52.         password: '',
  53.         confirmPassword: '',
  54.         nickname: '',
  55.         birthdate: '',
  56.         city: '',
  57.         notification: false,
  58.         agreement: false,
  59.       }
  60.     };
  61.   }
  63.   formChange = value => {
  64.     // 说明：
  65.     //  1. 表单是双向通行的，所有表单的响应数据都会同步更新 value
  66.     //  2. 这里 setState 只是为了实时展示当前表单数据的演示使用
  67.     this.setState({ value });
  68.   };
  70.   checkPassword = (rule, values, callback) => {
  71.     if (!values) {
  72.       callback('请输入正确的密码');
  73.     } else if (values.length < 8) {
  74.       callback('密码必须大于8位');
  75.     } else if (values.length > 16) {
  76.       callback('密码必须小于16位');
  77.     } else {
  78.       callback();
  79.     }
  80.   };
  82.   checkConfirmPassword = (rule, values, callback) => {
  83.     if (!values) {
  84.       callback('请输入正确的密码');
  85.     } else if (values && values !== this.state.value.password) {
  86.       callback('两次输入密码不一致');
  87.     } else {
  88.       callback();
  89.     }
  90.   };
  92.   validateFields = () => {
  93.     const { validateFields } = this.refs.form;
  95.     validateFields((errors, values) => {
  96.       console.log({ errors })
  98.       if (!errors) {
  99.         Feedback.toast.success('注册成功')
  100.       }
  101.     });
  102.   }
  104.   render() {
  105.     return (
  106.       <div style={styles.container}>
  107.         <FormBinderWrapper
  108.           value={this.state.value}
  109.           onChange={this.formChange}
  110.           ref="form"
  111.         >
  112.           <div style={styles.content}>
  113.             <div style={styles.formItem}>
  114.               <span style={styles.formItemLabel}>邮箱：</span>
  115.               <FormBinder name="email" required type="email" message="请输入正确的邮箱" >
  116.                 <Input placeholder="ice-admin@alibaba-inc.com" /> 
  117.               </FormBinder>
  118.               <FormError style={styles.formItemError} name="email" />
  119.             </div>
  121.             <div style={styles.formItem}>
  122.               <span style={styles.formItemLabel}>昵称：</span>
  123.               <FormBinder name="nickname" required message="请输入正确的昵称" >
  124.                 <Input placeholder="淘小宝" /> 
  125.               </FormBinder>
  126.               <FormError style={styles.formItemError} name="nickname" />
  127.             </div>
  129.             <div style={styles.formItem}>
  130.               <span style={styles.formItemLabel}>密码：</span>
  131.               <FormBinder name="password" required validator={this.checkPassword}>
  132.                 <Input htmlType="password" placeholder="输入密码" /> 
  133.               </FormBinder>
  134.               <FormError style={styles.formItemError} name="password" />
  135.             </div>
  137.             <div style={styles.formItem}>
  138.               <span style={styles.formItemLabel}>确认密码：</span>
  139.               <FormBinder name="confirmPassword" required validator={this.checkConfirmPassword}>
  140.                 <Input htmlType="password" placeholder="输入确认密码" /> 
  141.               </FormBinder>
  142.               <FormError style={styles.formItemError} name="confirmPassword" />
  143.             </div>
  145.             <div style={styles.formItem}>
  146.               <span style={styles.formItemLabel}>出生日期：</span>
  147.                 <FormBinder name="birthdate" getFieldValue={(date, formatDate) => { return formatDate }}>
  148.                   <DatePicker formater={["YYYY-MM-DD"]} style={{ width: '200px' }} />
  149.                 </FormBinder>
  150.             </div>
  152.             <div style={styles.formItem}>
  153.               <span style={styles.formItemLabel}>籍贯地址：</span>
  154.               <FormBinder name="city" >
  155.                 <CascaderSelect dataSource={cityData} style={{ width: '200px' }} /> 
  156.               </FormBinder>
  157.             </div>
  159.             <div style={styles.formItem}>
  160.               <span style={styles.formItemLabel}>开启通知：</span>
  161.               <FormBinder name="notification" valuePropName="checked">
  162.                 <Switch /> 
  163.               </FormBinder>
  164.             </div>
  166.             <div style={styles.formItem}>
  167.               <span style={styles.formItemLabel}>用户协议：</span>
  168.               <FormBinder
  169.                 name="agreement"
  170.                 valuePropName="checked"
  171.               >
  172.                 <Checkbox />
  173.               </FormBinder>
  174.             </div>
  176.             <Button type="primary" style={{width: '270px'}}  onClick={this.validateFields}>
  177.               注 册
  178.             </Button>
  179.           </div>
  180.         </FormBinderWrapper>
  182.         <div style={styles.preview}>
  183.           <strong>当前表单数据</strong>
  184.           <pre>{JSON.stringify(this.state.value, null, 2)}</pre>
  185.         </div>
  187.       </div>
  188.     );
  189.   }
  190. }
  192. const styles = {
  193.   formItem: {
  194.     marginBottom: '20px',
  195.     display: 'flex',
  196.     alignItems: 'center',
  197.   },
  198.   formItemLabel: {
  199.     width: '70px',
  200.     mariginRight: '10px',
  201.     display: 'inline-block',
  202.     textAlign: 'right',
  203.   },
  204.   formItemError: {
  205.     marginLeft: '10px',
  206.   },
  207.   preview: {
  208.     border: '1px solid #eee', 
  209.     marginTop: 20,
  210.     padding: 10
  211.   }
  212. }
  214. ReactDOM.render(<Register />, mountNode);

时间类组件

时间类组件的 value 类型为 moment 对象，一般在提交服务器前需要预处理

FormBinder ICE 表单粘合剂 - 图3

查看源码在线预览

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { FormBinderWrapper, FormBinder, FormError } from '@icedesign/form-binder';
  4. import { DatePicker, TimePicker, Button } from '@icedesign/base';
  6. const { MonthPicker, RangePicker } = DatePicker;
  8. class Time extends Component {
  9.   constructor(props) {
  10.     super(props);
  12.     this.state = {
  13.       value: {
  14.         datePicker: '',
  15.         dateTimePicker: '',
  16.         monthPicker: '',
  17.         rangePicker: [],
  18.         rangeRimePicker: [],
  19.         timePicker: '',
  20.       }
  21.     };
  22.   }
  24.   formChange = value => {
  25.     // 说明：
  26.     //  1. 表单是双向通行的，所有表单的响应数据都会同步更新 value
  27.     //  2. 这里 setState 只是为了实时展示当前表单数据的演示使用
  28.     this.setState({ value });
  29.   };
  31.   validateFields = () => {
  32.     const { validateFields } = this.refs.form;
  34.     validateFields((errors, values) => {
  35.       console.log(errors, values)
  36.     });
  37.   }
  39.   render() {
  40.     const config = {
  41.       required: true,
  42.       message: "请选择",
  43.       getFieldValue: (date, formatDate) => { return formatDate }
  44.     }
  46.     const style = {
  47.       width: '350px',
  48.     }
  50.     return (
  51.       <div style={styles.container}>
  52.         <FormBinderWrapper
  53.           value={this.state.value}
  54.           onChange={this.formChange}
  55.           ref="form"
  56.         >
  57.           <div style={styles.content}>
  58.             <div style={styles.formItem}>
  59.               <span style={styles.formItemLabel}>日期选择：</span>
  60.               <FormBinder name="datePicker" {...config}>
  61.                 <DatePicker formater={["YYYY-MM-DD"]} style={{...style}} />
  62.               </FormBinder>
  63.               <FormError style={styles.formItemError} name="datePicker" />
  64.             </div>
  66.             <div style={styles.formItem}>
  67.               <span style={styles.formItemLabel}>日期时间：</span>
  68.               <FormBinder name="dateTimePicker" {...config}>
  69.                 <DatePicker showTime formater={["YYYY-MM-DD"]} style={{...style}} />
  70.               </FormBinder>
  71.               <FormError style={styles.formItemError} name="dateTimePicker" />
  72.             </div>
  74.             <div style={styles.formItem}>
  75.               <span style={styles.formItemLabel}>月份选择：</span>
  76.               <FormBinder name="monthPicker" {...config}>
  77.                 <MonthPicker formater={["YYYY-MM"]} style={{...style}} />
  78.               </FormBinder>
  79.               <FormError style={styles.formItemError} name="monthPicker" />
  80.             </div>
  82.             <div style={styles.formItem}>
  83.               <span style={styles.formItemLabel}>区间选择：</span>
  84.               <FormBinder name="rangePicker" {...config}>
  85.                 <RangePicker formater={["YYYY-MM-DD"]} style={{...style}} />
  86.               </FormBinder>
  87.               <FormError style={styles.formItemError} name="rangePicker" />
  88.             </div>
  90.             <div style={styles.formItem}>
  91.               <span style={styles.formItemLabel}>区间时间：</span>
  92.               <FormBinder name="rangeRimePicker" {...config}>
  93.                 <RangePicker showTime formater={["YYYY-MM-DD"]} />
  94.               </FormBinder>
  95.               <FormError style={styles.formItemError} name="rangeRimePicker" />
  96.             </div>
  98.             <div style={styles.formItem}>
  99.               <span style={styles.formItemLabel}>时间选择：</span>
  100.               <FormBinder name="timePicker" {...config}>
  101.                 <TimePicker format="HH:mm:ss" style={{...style}} />
  102.               </FormBinder>
  103.               <FormError style={styles.formItemError} name="timePicker" />
  104.             </div>
  106.             <Button type="primary" style={{marginLeft: '80px'}}  onClick={this.validateFields}>
  107.               确 认
  108.             </Button>
  109.           </div>
  110.         </FormBinderWrapper>
  112.         <div style={styles.preview}>
  113.           <strong>当前表单数据</strong>
  114.           <pre>{JSON.stringify(this.state.value, null, 2)}</pre>
  115.         </div>
  117.       </div>
  118.     );
  119.   }
  120. }
  122. const styles = {
  123.   formItem: {
  124.     marginBottom: '20px'
  125.   },
  126.   formItemLabel: {
  127.     marginRight: '10px',
  128.   },
  129.   formItemError: {
  130.     marginLeft: '10px',
  131.   },
  132.   preview: {
  133.     border: '1px solid #eee', 
  134.     marginTop: 20,
  135.     padding: 10
  136.   }
  137. }
  139. ReactDOM.render(<Time />, mountNode);

重置表单

经过 FormBinder 包裹的 Select 组件，重置值为未选择状态。

FormBinder ICE 表单粘合剂 - 图4

查看源码在线预览

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { FormBinderWrapper, FormBinder, FormError } from '@icedesign/form-binder';
  4. import { Select, Button, Grid } from '@icedesign/base';
  5. const { Row, Col } = Grid;
  7. const dataSource = [];
  9. class Reset extends Component {
  10.   constructor(props) {
  11.     super(props);
  13.     this.state = {
  14.       value: {
  15.         bu: 'taobao',
  16.       },
  17.     };
  18.   }
  20.   formChange = value => {
  21.     // 说明：
  22.     //  1. 表单是双向通行的，所有表单的响应数据都会同步更新 value
  23.     //  2. 这里 setState 只是为了实时展示当前表单数据的演示使用
  24.     this.setState({ value });
  25.   };
  27.   handleReset = () => {
  28.     this.setState({
  29.       value: {
  30.         bu: 'taobao',
  31.       },
  32.     });
  33.   };
  35.   render() {
  36.     return (
  37.       <div>
  38.         <FormBinderWrapper value={this.state.value} onChange={this.formChange} ref="form">
  39.           <div style={styles.content}>
  40.             <div style={styles.formItem}>
  41.               <span>请选择：</span>
  42.               <FormBinder name="bu" required message="请选择">
  43.                 <Select
  44.                   dataSource={[
  45.                     {
  46.                       value: 'taobao',
  47.                       label: '淘宝',
  48.                     },
  49.                     {
  50.                       value: 'tmall',
  51.                       label: '天猫',
  52.                     },
  53.                     {
  54.                       value: 'aliyun',
  55.                       label: '阿里云',
  56.                     },
  57.                     {
  58.                       value: 'alitrip',
  59.                       label: '飞猪',
  60.                     },
  61.                   ]}
  62.                   placeholder="请选择"
  63.                   autoWidth={false}
  64.                 />
  65.               </FormBinder>
  66.               <FormError name="bu" />
  67.             </div>
  68.             <Button type="primary" onClick={this.handleReset} style={styles.resetButton}>重 置</Button>
  69.           </div>
  70.         </FormBinderWrapper>
  72.         <div style={styles.preview}>
  73.           <strong>当前表单数据：</strong>
  74.           <pre>
  75.             {JSON.stringify(this.state.value, null, 2)}
  76.           </pre>
  77.         </div>
  78.       </div>
  79.     );
  80.   }
  81. }
  83. const styles = {
  84.   formItem: {
  85.     display: 'flex',
  86.     alignItems: 'center',
  87.     marginBottom: '20px',
  88.   },
  89.   resetButton: {
  90.     marginLeft: '56px',
  91.   },
  92.   preview: {
  93.     border: '1px solid #eee', 
  94.     margin: '20px 0',
  95.     padding: '10px'
  96.   }
  97. }
  99. ReactDOM.render(<Reset />, mountNode);

分步校验表单

在表单检验中，可以分步骤对表单进行校验，先校验一部分表单域通过后在检验另外一部分表单

FormBinder ICE 表单粘合剂 - 图5

查看源码在线预览

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { FormBinderWrapper, FormBinder, FormError } from '@icedesign/form-binder';
  4. import { Input, Button } from '@icedesign/base';
  6. class App extends Component {
  7.   constructor(props) {
  8.     super(props);
  10.     this.state = {
  11.       value: {
  12.         email: '',
  13.         name: '',
  14.         password: '',
  15.       }
  16.     };
  17.   }
  19.   formChange = value => {
  20.     // 说明：
  21.     //  1. 表单是双向通行的，所有表单的响应数据都会同步更新 value
  22.     //  2. 这里 setState 只是为了实时展示当前表单数据的演示使用
  23.     this.setState({ value });
  24.   };
  26.   validateFields = (fieldnames = []) => {
  27.     const cb = (errors, values) => {
  28.       console.log('validateFields:', errors, values)
  29.     }
  31.     const { validateFields } = this.refs.form;
  33.     if (fieldnames.length) {
  34.       validateFields(fieldnames, cb);
  35.     } else {
  36.       validateFields(cb);
  37.     }
  38.   }
  40.   render() {
  42.     return (
  43.       <div>
  44.         <FormBinderWrapper
  45.           value={this.state.value}
  46.           onChange={this.formChange}
  47.           ref="form"
  48.         >
  49.           <div>
  50.             <div style={styles.formItem}>
  51.               <span style={styles.formLabel}>名称：</span>
  52.               <FormBinder name="name" required message="请输入正确的名称" >
  53.                 <Input placeholder="淘小宝" /> 
  54.               </FormBinder>
  55.               <FormError style={styles.formError} name="name" />
  56.             </div>
  58.             <div style={styles.formItem}>
  59.               <span style={styles.formLabel}>邮箱：</span>
  60.               <FormBinder name="email" type="email" required message="请输入正确的邮箱">
  61.                 <Input placeholder="ice-admin@alibaba-inc.com" /> 
  62.               </FormBinder>
  63.               <FormError style={styles.formError} name="email" />
  64.             </div>
  66.             <div style={styles.formItem}>
  67.               <span style={styles.formLabel}>设置密码：</span>
  68.               <FormBinder name="password" required message="请输入新密码" >
  69.                 <Input htmlType="password" placeholder="设置新密码"  /> 
  70.               </FormBinder>
  71.               <FormError style={styles.formError} name="password" />
  72.             </div>
  74.           </div>
  75.         </FormBinderWrapper>
  77.         <div style={{marginTop: 20}}>
  78.         <Button type="primary" style={{marginRight: 10}} onClick={() => this.validateFields(['name', 'email'])}>
  79.             先校验名称和邮箱
  80.           </Button>
  81.           <Button type="secondary" onClick={this.validateFields}>
  82.             校验整个表单
  83.           </Button>
  84.         </div>
  86.         <div style={styles.preview}>
  87.           <strong>当前表单数据</strong>
  88.           <pre>{JSON.stringify(this.state.value, null, 2)}</pre>
  89.         </div>
  91.       </div>
  92.     );
  93.   }
  94. }
  96. const styles = {
  97.   formItem: {
  98.     marginBottom: '20px'
  99.   },
  100.   formLabel: {
  101.     width: '70px',
  102.     marginRight: '10px',
  103.     textAlign: 'right',
  104.     display: 'inline-block'
  105.   },
  106.   formError: {
  107.     marginLeft: '10px',
  108.   },
  109.   preview: {
  110.     border: '1px solid #eee', 
  111.     marginTop: 20,
  112.     padding: 10
  113.   }
  114. }
  116. ReactDOM.render(<App />, mountNode);

自定义校验

可以使用 validator 自定义校验，根据不同情况执行不同的校验规则

FormBinder ICE 表单粘合剂 - 图6

查看源码在线预览

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { FormBinderWrapper, FormBinder, FormError } from '@icedesign/form-binder';
  4. import { Select, Button, Grid, Input } from '@icedesign/base';
  6. const { Row, Col } = Grid;
  8. class CustomValidator extends Component {
  9.   constructor(props) {
  10.     super(props);
  12.     this.state = {
  13.       value: { input: '' },
  14.     };
  15.   }
  17.   // 说明：
  18.   //  1. 表单是双向通行的，所有表单的响应数据都会同步更新 value
  19.   //  2. 这里 setState 只是为了实时展示当前表单数据的演示使用
  20.   formChange = (value) => {
  21.     this.setState({ value })
  22.   }
  24.   // 通过 validator 自定义校验规则，更多用法参考 https://github.com/yiminghe/async-validator#usage
  25.   inputValidator = (rule, value, callback) => {
  26.     const errors = [];
  27.     console.log(value)
  28.     if (!value) {
  29.       callback('输入不能为空');
  30.     } else if (value.length < 8) {
  31.       callback('输入长度必须大于 8 位');
  32.     } else if (value.length > 16) {
  33.       callback('输入长度必须小于 16 位');
  34.     } else {
  35.       callback();
  36.     }
  37.   };
  39.   render() {
  40.     return (
  41.       <div>
  42.         <FormBinderWrapper
  43.           value={this.state.value}
  44.           onChange={this.formChange}
  45.           ref="form"
  46.         >
  47.           <div style={styles.formItem}>
  48.             <span style={styles.formLabel}>自定义校验：</span>
  49.             <FormBinder name="input" required validator={this.inputValidator} >
  50.               <Input placeholder="请输入"/>
  51.             </FormBinder>
  52.             <FormError name="input" style={styles.formError} />
  53.           </div>
  54.         </FormBinderWrapper>
  55.         <p style={styles.desc}>输入不能为空，且长度必须大于8位小于16位</p>
  56.         <div style={styles.preview}>
  57.           <strong>当前表单数据：</strong>
  58.           <pre>
  59.             {JSON.stringify(this.state.value, null, 2)}
  60.           </pre>
  61.         </div>
  62.       </div>
  63.     );
  64.   }
  65. }
  67. const styles = {
  68.   formItem: {
  69.     dispaly: 'flex',
  70.     alignItems: 'center',
  71.   },
  72.   formLabel: {
  73.     marginRight: '10px'
  74.   },
  75.   formError: {
  76.     marginLeft: '10px',
  77.   },
  78.   desc: {
  79.     margin: '5px 0 20px 94px',
  80.     color: '#999',
  81.     fontSize: '12px'
  82.   },
  83.   preview: {
  84.     border: '1px solid #eee', 
  85.     margin: '20px 0',
  86.     padding: '10px'
  87.   }
  88. }
  90. ReactDOM.render(<CustomValidator />, mountNode);

自定义 valuePropName

有时候自定义或第三方的表单组件的取值属性不是 value，可以通过 valuePropName 来进行修改，也可以通过 setFieldValue 和 getFieldValue 进行转换

FormBinder ICE 表单粘合剂 - 图7

查看源码在线预览

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { FormBinderWrapper, FormBinder, FormError } from '@icedesign/form-binder';
  4. import { Checkbox, Switch } from '@icedesign/base';
  6. class App extends Component {
  8.   state = {
  9.     value: {
  10.       checkbox: true,
  11.       switch: 1
  12.     }
  13.   };
  15.   formChange = (value) => {
  16.     // 说明：
  17.     //  1. 表单是双向通行的，所有表单的响应数据都会同步更新 value
  18.     //  2. 这里 setState 只是为了实时展示当前表单数据的演示使用
  19.     this.setState({ value })
  20.   }
  22.   render() {
  23.     return (
  24.       <div>
  25.         <FormBinderWrapper
  26.           value={this.state.value}
  27.           onChange={this.formChange}
  28.         >
  29.           <div style={styles.content}>
  30.             <div style={styles.formItem}>
  31.               <span>复选框：</span>
  32.               <FormBinder name="checkbox" valuePropName="checked">
  33.                 <Checkbox />
  34.               </FormBinder>
  35.             </div>
  37.             <div style={styles.formItem}>
  38.               <span>开关：</span>
  39.               <FormBinder 
  40.                 name="switch"
  41.                 valuePropName="checked"  // Switch 接收的属性是 `checked`
  42.                 setFieldValue={(selected) => { return selected === 1 }}  // 转换为 boolean 传给 switch
  43.                 getFieldValue={(checked) => { return checked ? 1 : 0 }}  // 返回值转换为 number 给表单值
  44.               >
  45.                 <Switch size="small" />
  46.               </FormBinder>
  47.             </div>
  48.           </div>
  49.         </FormBinderWrapper>
  50.         <div style={styles.preview}>
  51.           <pre>{JSON.stringify(this.state, null, 2)}</pre>
  52.         </div>
  53.       </div>
  54.     )
  55.   }
  56. }
  58. const styles = {
  59.   formItem: {
  60.     display: 'flex',
  61.     alignItems: 'center',
  62.     marginBottom: '20px'
  63.   },
  64.   preview: {
  65.     border: '1px solid #eee', 
  66.     marginTop: 20,
  67.     padding: 10
  68.   }
  69. }
  71. ReactDOM.render(<App />, mountNode);

动态增加、减少表单项

演示 Input 组件数据交互和循环数组数据交互，数组表单用法，动态增加、减少表单项。

FormBinder ICE 表单粘合剂 - 图8

查看源码在线预览

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { FormBinderWrapper, FormBinder, FormError } from '@icedesign/form-binder';
  4. import { Input, Button, Grid, DatePicker } from '@icedesign/base';
  5. const { Row, Col } = Grid;
  7. class App extends Component {
  9.   constructor(props) {
  10.     super(props);
  12.     this.state = {
  13.       value: {
  14.         items: [{}]
  15.       }
  16.     };
  17.   }
  19.   addItem = () => {
  20.     this.state.value.items.push({});
  21.     this.setState({ value: this.state.value });
  22.   };
  24.   formChange = value => {
  25.     // 说明：
  26.     //  1. 表单是双向通行的，所有表单的响应数据都会同步更新 value
  27.     //  2. 这里 setState 只是为了实时展示当前表单数据的演示使用
  28.     this.setState({ value });
  29.   };
  31.   changeItem = () => {
  32.     let items = this.state.value.items;
  33.     items[0].aaa = '有趣';
  34.     this.setState({
  35.       value: {
  36.         ...this.state.value,
  37.         items: items
  38.       }
  39.     });
  40.   };
  42.   removeItem = (index) => {
  43.     this.state.value.items.splice(index, 1);
  44.     this.setState({
  45.       value: this.state.value
  46.     });
  47.   }
  49.   validateAllFormField = () => {
  50.      this.refs.form.validateFields((errors, values) => {
  51.       console.log('errors', errors, 'values', values);
  52.     });
  53.   };
  55.   render() {
  56.     return (
  57.       <div>
  58.         <FormBinderWrapper
  59.           value={this.state.value}
  60.           onChange={this.formChange}
  61.           ref="form"
  62.         >
  63.           <ArticleList
  64.             items={this.state.value.items}
  65.             addItem={this.addItem}
  66.             removeItem={this.removeItem}
  67.             validateAllFormField={this.validateAllFormField}
  68.           />
  69.         </FormBinderWrapper>
  71.         <div style={styles.preview}>
  72.           <strong>当前表单数据：</strong>
  73.           <pre>{JSON.stringify(this.state.value, null, 2)}</pre>
  74.         </div>
  75.       </div>
  76.     );
  77.   }
  78. }
  80. class ArticleList extends Component {
  81.   render() {
  82.     return (
  83.       <div>
  84.         {this.props.items.map((item, index) => {
  85.           return (
  86.             <Row key={index} style={styles.row}>
  87.               <Col>
  88.                 <span>文章名称：</span>
  89.                 <FormBinder required message="文章名称必填" name={`items[${index}].name`} >
  90.                   <Input />
  91.                 </FormBinder>
  92.                 <FormError name={`items[${index}].name`} style={styles.formError} />
  93.               </Col>
  94.               <Col>
  95.                 <span>文章地址：</span>
  96.                 <FormBinder name={`items[${index}].url`} type="url" required message="请输入正确的 URL 地址" >
  97.                   <Input />
  98.                 </FormBinder>
  99.                 <FormError name={`items[${index}].url`} style={styles.formError} />
  100.               </Col>
  101.               <Col>
  102.                 <Button type="secondary" onClick={this.props.removeItem.bind(this, index)}>删除</Button>
  103.               </Col>
  104.             </Row>
  105.           );
  106.         })}
  107.         <div style={styles.buttons}>
  108.           <Button type="secondary" onClick={this.props.addItem}>新 增</Button>
  109.           <Button type="primary" style={{marginLeft: 10}} onClick={this.props.validateAllFormField}>
  110.             校 验
  111.           </Button>
  112.         </div>
  113.       </div>
  114.     );
  115.   }
  116. }
  118. const styles = {
  119.   row: {
  120.     marginBottom: '20px',
  121.   },
  122.   formError: {
  123.     display: 'block',
  124.     marginTop: '10px',
  125.     marginLeft: '70px',
  126.   },
  127.   buttons: {
  128.     margin: '20px 0 0 86px',
  129.   },
  130.   preview: {
  131.     border: '1px solid #eee', 
  132.     marginTop: 20,
  133.     padding: 10
  134.   }
  135. }
  137. ReactDOM.render(<App />, mountNode);

相关区块

FormBinder ICE 表单粘合剂 - 图9

暂无相关区块