``` 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/> ```