时间戳

首页 > 解决方案 > 如何在反应钩子中关闭模态？

javascript - 如何在反应钩子中关闭模态？

问题描述

我有一个反应模式，它在正文中包含一个按钮，单击此按钮会打开新页面，例如支付页面，但模式仍然打开，现在我想点击它应该打开一个新页面并关闭模式。

这是我的模态

function ModalA() {
    const history = useHistory();
    const dispatch = useDispatch();
    
    const handleCloseModal = () => {
        dispatch(actions.modalsActions.closeModal({
            id: "ModalA",
        }))
    }
    return (
       <Modal id="ModalA">

          <button onClick={}>Upgrade Now</button>

       </Modal>
    )
}

export default ModalA

现在，当我单击立即升级按钮时，它会打开一个新页面，但不会关闭模式。

这个问题有什么好的解决方案吗？

标签： javascriptreactjsreact-reduxreact-modal

解决方案

您只需在 onClick 中调用这两个函数。下面的代码应该可以工作

<button onClick={() =>{
    handleCloseModal()
    history.push('/account/payments')   
}}>Upgrade Now</button>

推荐阅读