``` const { useForm, useFieldArray, useFormValue,useState } = Form; //const form = Form.useForm(FormStrategy.View); const UserLayout = () => { //form实例 const form = Form.useForm(FormStrategy.View); //按钮加载状态 const [lazy, setLazy] = React.useState(false); // 提交表单的触发事件 const onSubmit = React.useCallback(form => { setLazy(true); //确保在进行成功回掉事件的时候已经进行表单验证 form.getValue(); return new Promise((resolve) => { setTimeout(resolve, 1000); }) }, []); //自动填充用户名密码 const onSubLaySubmit = React.useCallback(() => { setLazy(true); setTimeout(() => { form.initialize({ username: 'Hyouka', password: '123456' }); onSubmitSuccess(); }, 1000); }, []); //成功回调函数会在resolve之后调用 const onSubmitSuccess = React.useCallback(() => { setLazy(false); }, []) return ( <div className='user-login-container'> <div className='user-login-container-form'> <header>Hyouka</header> <Form layout='horizontal' form={form} onSubmit={onSubmit} onSubmitSuccess={onSubmitSuccess} > <FormInputField name='username' helpDesc="用户名: Hyouka" required="请填写用户名" /> <FormInputField name='password' props={{ type: 'password' }} helpDesc='密码随便填，只能填数字，字母形式' required='请填写密码' validators={[ Validators.pattern(/^[a-zA-Z0-9]+$/, '只允许英文字母和数字'), ]} /> <div className='user-login-container-form-action'> <Button loading={lazy} htmlType='submit'>登陆</Button> <Button onClick={onSubLaySubmit} loading={lazy}>懒得填点我</Button> </div> </Form> </div> </div> ) }; ``` ``` <UserLayout/> ```