如何在反应钩子中关闭模态?

时间:2021-01-07 18:35:32

标签: javascript reactjs react-redux react-modal

我有一个反应模态,它在主体内部包含一个按钮,单击此按钮会打开新页面,例如付款页面,但模态仍然打开,现在我想单击它应该打开一个新页面并关闭模态.

这是我的模态

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

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

这个问题有什么好的解决办法吗?

1 个答案:

答案 0 :(得分:0)

您只需要调用的onClick内两种功能。在下面的代码应该工作

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