React中antd-modal嵌套form表单的使用
<Modal title="请选择模板" visible={true} width="428px" centered={true} className='creatModal' getContainer={false} //1.排除警告 onCancel={closeCreatModal} footer={[<Button key="submit" type="primary" onClick={onSave}>保存</Button>]} > <Form form= {form} layout='vertical' autoComplete="off" > <Form.Item label="模板名称" name="name" rules={[{ required: true, message: '请输入模板名称' }]} > <Input placeholder='请输入'/> </Form.Item> <Form.Item className="formDesc" label="描述信息" name="describe" > <Input placeholder='请输入'/> </Form.Item> </Form> </Modal>
const [form] = Form.useForm() //form实例
const onSave = async()=>{ const values = await form.validateFields() //2.表单验证并获取表单值 setCreatModal(false) }
注意:出现:'Instance created by `useForm` is not connect to any Form element.警告的问题
解决方法:
1.在Modal组件中添加上 getContainer={false}
2.在modal组件添加forceRender属性