如何在react钩子中关闭模态

Question

我有一个react modal，它在一个主体内包含一个按钮，点击这个按钮会打开新页面，例如支付页面，但modal仍然打开，现在我想点击它应该会打开一个新页面并关闭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

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

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

Answer 1

您只需要在onClick内部调用这两个函数。下面的代码应该工作

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