如何在反应挂钩中关闭模态？

Question

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

这是我的模态

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

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

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

Answer 1

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

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

如何在反应挂钩中关闭模态？

How to close modal in react hooks?

javascript

reactjs

react-redux

react-modal