Javascript 反应模式未通过OnClick关闭

我已经设置了一个onClick方法来关闭React模式，但是它没有改变状态。我相信

openModalTwo，setOpenModalTwo可能有问题，但我不确定

这是我的密码：

import { Avatar } from "@material-ui/core";
import React, { useState } from "react";
import { useSelector } from "react-redux";
import { selectUser } from "../features/userSlice";
import "../style/QuestionBox.css";
import Modal from "react-modal";
import PeopleAltOutlinedIcon from "@material-ui/icons/PeopleAltOutlined";
import { ExpandMore } from "@material-ui/icons";
import { Input } from "@material-ui/core";
import LinkIcon from "@material-ui/icons/Link";
import db from "../firebase";
import firebase from "firebase";

function QuestionBox() {
  const user = useSelector(selectUser);
  const [openModalTwo, setOpenModalTwo] = useState(false);
  const [input, setInput] = useState("");
  const [inputUrl, setInputUrl] = useState("");

  const handleQuestion = (e) => {
    e.preventDefault();

    db.collection("questions").add({
      question: input,
      imageUrl: inputUrl,
      timestamp: firebase.firestore.FieldValue.serverTimestamp(),
      user: user,
    });

    setInput("");
    setInputUrl("");

    setOpenModalTwo(false);
  };

  return (
    <div className="questionBox" onClick={() => setOpenModalTwo(true)}>
      <div className="questionBox__info">
        <Avatar src={user.photo} />
        <h5>{user.displayName}</h5>
      </div>
      <div className="questionBox__question">
        <p>Where do I start?</p>
      </div>

      <Modal
        isOpen={openModalTwo}
        onRequestClose={() => setOpenModalTwo(false)}
        shouldCloseOnOverlayClick={false}
        style={{
          overlay: {
            width: 700,
            height: 600,
            backgroundColor: "transparent",
            boxShadow:
              "box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);",
            zIndex: "1000",
            top: "50%",
            left: "50%",
            marginTop: "-300px",
            marginLeft: "-350px",
          },
        }}
      >
        <div className="modal__title">
          <h5>Add Question Here</h5>
          <h5>Share Your Question</h5>
        </div>
        <div className="modal__info">
          <Avatar Avatar className="avatar" src={user.photo} />
          <p>
            {user.displayName ? user.displayName : user.email} wants to know
          </p>
          <div className="modal__scope">
            <PeopleAltOutlinedIcon />
            <p>Public</p>
            <ExpandMore />
          </div>
        </div>
        <div className="modal__field">
          <Input
            required
            value={input}
            onChange={(e) => setInput(e.target.value)}
            type="text"
            placeholder="Ask where to start on your project with a specific 'How' or 'What' question."
          />
          <div className="modal__fieldLink">
            <LinkIcon />
            <input
              value={inputUrl}
              onChange={(e) => setInputUrl(e.target.value)}
              type="text"
              placeholder="Add a link to help others understand what you want to build."
            />
          </div>

          <div className="modal__buttons">
            <button
              onClick={() => setOpenModalTwo({ openModalTwo: false })}
              className="cancel"
            >
              Close
            </button>
            <button onClick={handleQuestion} type="submit" className="add">
              Add Question
            </button>
          </div>
        </div>
      </Modal>
    </div>
  );
}

export default QuestionBox;

从“@material ui/core”导入{Avatar}”；
从“React”导入React，{useState}；
从“react redux”导入{useSelector}；
从“./features/userSlice”导入{selectUser}；
导入“./style/QuestionBox.css”；
从“反应模态”导入模态；
从“@material ui/icons/PeopleAltOutlinedIcon”导入PeopleAltOutlinedIcon；
从“@material ui/icons”导入{ExpandMore}”；
从“@material ui/core”导入{Input}”；
从“@material ui/icons/Link”导入LinkIcon；
从“./firebase”导入数据库；
从“firebase”导入firebase；
函数QuestionBox（）{
const user=useSelector（selectUser）；
const[openModalTwo，setOpenModalTwo]=useState（false）；
const[input，setInput]=useState（“”）；
const[inputUrl，setInputUrl]=useState（“”）；
常量handleQuestion=（e）=>{
e、 预防默认值（）；
db.收集（“问题”）。添加({
问题:投入,，
imageUrl:inputUrl，
时间戳：firebase.firestore.FieldValue.serverTimestamp（），
用户:用户,，
});
设置输入（“”）；
setInputUrl（“”）；
setOpenModalTwo（假）；
};
返回(
setOpenModalTwo（真）}>
{user.displayName}
我从哪里开始

setOpenModalTwo（假）}
shouldCloseOnOverlayClick={false}
风格={{
覆盖：{
宽度：700，
身高：600，
背景色：“透明”，
boxShadow：
“长方体阴影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；”，
zIndex：“1000”，
顶部：“50%”，
左：“50%”，
marginTop:“-300px”，
marginLeft:“-350px”，
},
}}
>
在此添加问题
分享你的问题

{user.displayName？user.displayName:user.email}想知道

公开的

setInput（e.target.value）}
type=“text”
placeholder=“用特定的“如何”或“什么”问题询问项目从何处开始。”
/>
setInputUrl（e.target.value）}
type=“text”
placeholder=“添加链接以帮助其他人了解您要构建的内容。”
/>
setOpenModalTwo（{openModalTwo:false}）}
className=“取消”
>
接近
添加问题
);
}
导出默认问题框；
不知道
react modal
是如何工作的，但是当您在单击modal的父容器时设置
setOpenModalTwo（true）
时，当您试图关闭modal时（我猜是通过单击），您也会触发父div的
onClick
事件，然后重新打开modal

因此，要么将您的模式移动到div之外，要么在模式请求关闭时使用
event.preventDefault（）
，
您只需要使用
setOpenModalTwo（false）
而不是
setOpenModalTwo（{openModalTwo:false}）
谢谢，我通过将onClick事件添加到“问题框”div中就可以修复它。