在 reactjs 模式关闭按钮不起作用

Question

我在reactjs项目中使用bootstrap mod。这是我在我的项目中安装的软件包的链接：https://www.npmjs.com/package/react-responsive-modal

当我单击打开模式按钮时，它正在工作，但是当我单击关闭按钮时，关闭按钮不起作用。我正在我的项目中使用钩子。下面，我提到了我的代码：

import React, { useState } from 'react'
import Modal from 'react-responsive-modal'
const Login = () => {
const [open, openModal] = useState(false)
const onOpenModal = () => {
openModal({open: true})
};
const onCloseModal = () => {
openModal({open: false})
};
return(
<div>
<h1>Login Form</h1>
<button onClick={onOpenModal}>Open modal</button>
<Modal open={open} onClose={onCloseModal} center>
<h2>Simple centered modal</h2>
</Modal>            
</div>
)
}
export default Login;

Answer 1

问题是，您正在将对象设置为状态，

openModal({open: true})

这会将对象存储在状态中。

setState需要改变的直接价值，你的setState必须是这个，

const onOpenModal = () => {
openModal(!open)  //This will negate the previous state
};
const onCloseModal = () => {
openModal(!open) //This will negate the previous state
};

演示

---

您可以简化代码，只需为模态使用 1 个更改句柄，

const Login = () => {
const [open, openModal] = useState(false)
const toggleModal = () => {
openModal(!open)
};
return(
<div>
<h1>Login Form</h1>
<button onClick={toggleModal}>Open modal</button>
<Modal open={open} onClose={toggleModal} center>
<h2>Simple centered modal</h2>
</Modal>            
</div>
)
}

演示

Answer 2

你对模型钩子的命名具有误导性，你错误地使用了 Hook 的 setState 部分，可能将其与非 Hook React 代码的 this.setState 约定混淆了。

import React, { useState } from 'react'
import Modal from 'react-responsive-modal'
const Login = () => {
const [modalOpen, setModalOpen] = useState(false)
const onOpenModal = () => {
setModalOpen(true)
};
const onCloseModal = () => {
setModalOpen(false)
};
return(
<div>
<h1>Login Form</h1>
<button onClick={onOpenModal}>Open modal</button>
<Modal open={modalOpen} onClose={onCloseModal} center>
<h2>Simple centered modal</h2>
</Modal>            
</div>
)
}
export default Login;