antDesign 使用Form并进行表单验证

时间:2024-10-23 23:07:38
import  React  from  'react';
import  {Form,Input,Select,Button ...}  from  'antd';

class  PageName  extends  React.Component{
         render(){
              const  {getFieldDecorator}  = this.props.form;
              return(
                  <Form>
                       <Form.Item  label='姓名'>
                            {
                              getFieldDecorator(
                                  'name',{
                                     rules:[
                                     {required:true,message:'请输入姓名'}
                                     ]
                                  }
                              )                              (<Input></Input>)
                            }
                       </Form.Item>
                  </Form>
          )
    }
}  

export  default  Form.create()(PageName)

官方文档:
form.create:  https://github.com/react-component/form#note-use-wrappedcomponentref-instead-of-withref-after-rc-form140                            

当时用了form.create包装后的组件,会自带 this.props.form 属性

antDesign 使用Form并进行表单验证

参见文档:https://ant.design/components/form-cn/