react Ant组件库的高阶组件Form

Form 组件

class Login extends Component { ... }

const WrapperForm = Form.create ( )( Login )



利用Form.create （）包装Form组件成一个新组件

新组件会像form组件传递一个属性 form属性对象

Form的create 是个函数 执行这个函数 这个函数的返回值也是一个函数 执行并传入Login 组件参数



export default WrapperForm



const form = this.props.from   

const values = form.getFieldsValue(  )  拿到所有的字段

const username = form.getFieldValue(" username ")  拿到指定的字段

< Form > 

<Item>

{ getFieldDecorator（ "username" , { 配置对象  reules：[  { 验证 } ] }） （ <Input /> ）}

配置字段名

</Item>

< /Form  >

标签组件 组件的实例

组件 不加< >


validateFields 

函数式组件

const [form] = Form.useForm();

<Form form={form} > </Form>

修改 默认字段的数据

<Form  fields={		// 默认接受一个数组
                [
                    {
                        "name": [
                            "username"
                        ],
                        "value": "Ant Design"
                    }, 
                    {
                        "name": [
                            "password"
                        ],
                        "value": "我的密码"
                    }
                ]
            }>
     </Form>