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

Question

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

我正在使用 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 returns "true" 表示模态仍然设置为打开。如何在调用“navigateToRegistrationForm”函数时更改其状态？

Answer 1

您已经非常接近实现这一目标了。您所需要的只是将 closeModal 函数向下传递给 EventDetail 组件，如下所示：

<EventDetail onCloseModal={closeModal} />然后在navigateToRegistrationForm

里面调用

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

Modal state not being set to closed after history.push in React

javascript

modal-dialog

reactjs

react-modal