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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM