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属性

 

posted @ 2021-11-04 14:10  喵星人&龙  阅读(2267)  评论(0编辑  收藏  举报