javascript - 在 React 中的 history.push 之后模态状态未设置为关闭

Question

我有一个包含“事件”卡片的 slider ，当用户点击卡片时，会出现一个模式。在模态框内，有一个按钮可将用户重定向到注册表单。

我正在使用 react-modal .

问题是当用户点击按钮时，滚动条消失了。我的结论是，更改当前页面后模态状态仍设置为打开。

这是新闻组件的提取代码，您会在其中找到模态:

import Modal from "react-modal";


function News() {
const [modalIsOpen, setIsOpen] = React.useState(false);

const closeModal = () => {
    setIsOpen(false);
  };
 return (
     <Button onClick={() => setIsOpen(true}>
       Open Modal
     </Button>

        <Modal
          className="modal-class"
          isOpen={modalIsOpen}
          onRequestClose={closeModal}
        >

        <EventDetail 
            onCloseModal={
                () => setIsOpen(false), 
                modalIsOpen
            }
        />

        </Modal>
 )
}

这是事件细节:

function EventDetail (onCloseModal) {

const navigateToRegistrationForm = () => {
    console.log(onCloseModal);
    history.push(`${baseUrl}/registrationForm/${form.id}`) ;
}
 return (

   <Button onClick={navigateToRegistrationForm}>
       Register
   </Button>

 )
}

console.log 返回“true”，这意味着模式仍然设置为打开。如何在调用“navigateToRegistrationForm”函数时更改其状态？

Answer 1

您非常接近实现这一目标。所有你需要的基本上是通过 closeModal功能低至 EventDetail像这样的组件:

<EventDetail onCloseModal={closeModal} />然后在里面调用navigateToRegistrationForm