ant design——Form

绪论：刚开始要把原生的表单控件替换成antdesign中的表单控件可谓是波折重重，我就讲讲我的辛酸史~~~

• 根据ant design官方网站中的源代码使用。
  因为我只用几个控件，所以直接复制我要的那部分到我的项目中，可是呀，getFieldDecorator方法报错，屡试不爽,各种百度之下，终于知道了到底怎么使用：

  //1. 定于组件的方式要是这样的：
   class 组件名 extends React.Component{......}
   
  //2. 导出方式是这样的：
   //Form.create(options):关于options的说明官网比较详细，可以敲敲代码自行练习
   const WrappedRegistrationForm = Form.create({ name: 'register' })(组件名);
   export default WrappedRegistrationForm;
  

• ant design表单控件的布局

  const formItemLayout = {
  		//（3.14.0 新增，之前的版本只能设置到 FormItem 上。）label 标签布局，同 <Col> 组件，设置 span offset 值，如 {span: 3, offset: 12} 或 sm: {span: 3, offset: 12}
          labelCol: {  
              xs: { span: 24 },
              sm: { span: 4, offset: 0 },
          },
          // （3.14.0 新增，之前的版本只能设置到 FormItem 上。）需要为输入控件设置布局样式时，使用该属性，用法同 labelCol
          wrapperCol: {
              xs: { span: 24 },
              sm: { span: 13, offset: 1 },
          },
      };
  

  //利用解构赋值的方式实现整个表单的布局
  <Form {...formItemLayout} onSubmit={this.handleSubmit} className="withdraw-cashes-bind"></Form>
  

• ant design表单控件初始值问题
  刚开始以为Input组件跟原生的input输入框使用方式一样，用了才知道，ref——不支持、value设置初始值——不支持，那就想办法喽~~

  1. 控制表单中Input的值，通过 this.props.form.setFieldsValue方法改变，而不是react的setState，其中cashesRealname指的是getFieldDecorator方法定义的第一个参数
  handleRealnameInputChange = (value) => {
      console.log(value.target);
      this.props.form.setFieldsValue({
          cashesRealname: this.state.realName,
      });
  };
      //手机格式、支付宝账号格式验证
  checkName= (rule, val, callback) => {
      if (!val) {
          callback('不能为空');
      } else {
          if (!(正则表达式.test(val))) {
              callback('格式错误');
          } else {
              callback('');
          }
      }
      callback();
  };
  

  1. getFieldDecorator方法中的第一个参数是用来控制其函数中包含的Input控件的，然后通过Input的onChange事件方法监听Input的值.注意：getFieldDecorator第一个参数只控制其中的Input，如果还有其他元素，那onChange中写的方法（用来监听文本框的输入）就会失效。（更深入的我再细看了补充~~~）
  2. getFieldDecorator方法中的initialValue可以用来设置文本框初始值。
  3. getFieldDecorator方法中的rules数组可以设置文本框是否required。
  4.  getFieldDecorator方法中的rules数组可以设置文本框required={true}时的表单验证函数，通过validator: this.checkName。
   <Form.Item label="真实姓名" colon={false} hasFeedback  validateStatus="" className={'cashes-name'} >
                     {
                          !realName || realName === '' ?
                              getFieldDecorator('cashesRealname', {
                                  initialValue: this.state.realName,       
                                  rules: [{ required: true, message: '昵称不能为空' }, {
                                      validator: this.checkName,
                                  }],
                                  validateTrigger: 'onBlur',
                              })(
                                  <Input placeholder="请输入您的真实姓名" onChange={this.handleRealnameInputChange}/>,
                              )
                              :
                              getFieldDecorator('cashesRealname', {
                                  initialValue: this.state.realName.replace(/(?<=.)./g, '*'),
                                  // initialValue: this.state.realName,
                                  rules: [{ required: false, message: '昵称不能为空' }, {
                                      validator: this.checkName,
                                  }],
                                  validateTrigger: 'onBlur',
                              })(
                                  <Input placeholder="请输入您的真实姓名" readOnly
                                      style={{ boxShadow: 'none', border: 'none' }}
                                      onChange={this.handleRealnameInputChange}/>,
                              )
                      }
                  </Form.Item>