javascript - React Modal 未通过 OnClick 关闭

Question

我已经设置了一个 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;

标签： javascripthtmlreactjsreact-hooksreact-modal

Answer 1

不知道究竟是如何react-modal工作的，但是当您设置setOpenModalTwo(true)单击模态的父容器时，当您尝试关闭模态（我猜是通过单击）时，您也会触发onClick父 div 的事件，所以重新打开模态。

所以要么将你的模态移到你的 div 之外，或者event.preventDefault()在模态请求关闭时使用