antd Design Form表单的简单理解

关于react+ant的运用配合的学习心得，还是新手各位大佬见谅

1 对于普通的开发需求来说（仅仅限于类组件）
引入Form
关于Form 有以下几种常用属性

<Form ></Form>

(1) initialValues 这个属性是设置 Form.Item 的初始值，，当然还可以在Form.Item里设置每个表单项的初始值，但是官方推荐的还是在Form 里设置
用法来说 initialValues 是一个对象 比如你的表单项是这样的

<Form  initialValues={{userName:"张三",password:"123456"}}>
    <Form.Item  name="userName" label="用户名">
    </From.Item>
    <Form.Item  name="password" label="密码">
    </From.Item>
</Form>

（2）wrapperCol和labelCol的使用,wrapperCol是对layout布局来说设置表单内容项的宽度，所占比例等
labelCol是设置表单项的label
举例开说

const formLayOut={ labelCol:{span:4,offset:8},wrapperCol:{span:20} }
<Form  initialValues={{userName:"张三",password:"123456"}}  {...formLayOut}>
    <Form.Item  name="userName" label="用户名">
    </From.Item>
    <Form.Item  name="password" label="密码">
    </From.Item>
</Form>

(3) 如何获取表单各项的value值？通过React.creatRef()
举例来说

//创建表单的ref
 formRef=React.creatRef()
 //通过FormInstance的api    getFieldsValue 来获取
 handleSubmit=()=>{
  //formData就是获取的各个表单项的值组成的对象
    let formData= this.formRef.current.getFieldsValue 
   
    //如果想获取某一个表单项的值可以用getFieldValue的方法
    let userNameData=this.formRef.current.getFieldValue("userName")
    
    //如果想重置表单的各项回到最初设定的initialValues的值可以用resetFields
    this.formRef.current.resetFields()
    
    //如果想重置某些字段的值，因为表单各项设置了name的属性，所以不要用this.setState() 用setFieldsValue这个方法
    //比如一开始表单设定了初始值，但是某个操作之后要把初始值改为ajax返回的数据可以这样做
    Axios.get("/api/initialvalue").then((res)=>{
            this.formRef.current.setFieldsValue(res.data.initialValues)
        })
        
    //比如在点击提交按钮后要触发验证可以用 validateFields 方法 antd4中是返回的promise对象
    this.fromRef.current.validateFields ().then((values)=>{
             console.log(values) //表单验证通过后 触发的  values是表单各项值组成的对象
   }).catch((err)=>{
          console.loag(err)  //表单验证失败触发
   })
    
 }
const formLayOut={ labelCol:{span:4,offset:8},wrapperCol:{span:20} }
<Form  initialValues={{userName:"张三",password:"123456"}}  {...formLayOut}  ref={this.formRef} >
    <Form.Item  name="userName" label="用户名">
    </From.Item>
    <Form.Item  name="password" label="密码">
    </From.Item>

（4）表单验证规则
antd表单验证规则似乎好像是只能在表单各项也就是Form.Item里添加 其属性名是 rules

<Form  initialValues={{userName:"张三",password:"123456"}}  {...formLayOut}>
    <Form.Item  name="userName" label="用户名" rules=[
              {required:true,message:"用户名不能为空"}，
              {max:11,min:5,message:"长度必须在5-11之间"}，
              {pattern:new RegExp(/ 自己填写的正则/,message:"")} ], 
      //还可以设置触发方式 比如一下
           validateTrigger="onBlur"
       //自定义验证的话可以这样  
         ()=>({
              validator(rules,value){
                if(value!=="哈哈哈"){
                     return Promise.reject(new Error("用户名不是我想象中的哪个"))
                }else{
                    return Promise.resolve()
                 }
            }
        })
       >
    </From.Item>
    <Form.Item  name="password" label="密码">
    </From.Item>
</Form>

(5) 对于Form.Item 里的表单项如果是类似于Checkbox 和Switch这样的组件怎么获取其值呢？只需要添加一个valuePropName属性即可

 <FormItem wrapperCol={{"span":"12"}}  name="rememeber" valuePropName="checked">
                            <Checkbox>记住密码？</Checkbox>
</FormItem>