可以通过Antd的Modal组件的getContainer属性设置父级容器,从而实现在另一个模态框中弹出确认弹窗。
示例代码如下:
import React, { useState } from 'react'
import { Modal, Button } from 'antd'
const AntdModal = () => {
const [visible, setVisible] = useState(false)
const [confirmVisible, setConfirmVisible] = useState(false)
const handleOk = () => {
setConfirmVisible(false)
setVisible(false)
}
const handleCancel = () => {
setConfirmVisible(false)
}
const handleOpen = () => {
setVisible(true)
}
const handleConfirm = () => {
setConfirmVisible(true)
}
return (
<>
setVisible(false)}>
document.getElementById('modal-container')}
>
Are you sure?
>
)
}
export default AntdModal
在Modal组件中,我们引入了一个div元素,并将其id设置为“modal-container”。随后,在确认弹窗的Modal组件中,我们设置getContainer属性为() => document.getElementById('modal-container'),表示将确认弹窗的父级容器设为这个div元素,从而实现在另一个模态框中弹出确认弹窗的需求。