reactjs - 在 React 中单击模态外部时，Bootstrap 模态没有关闭

Question

我使用 react-bootstrap 模式在 React 中显示通知。它工作正常，但是当我在模式之外单击时它没有关闭。

模态代码

import React from "react";
import ReactDom from 'react-dom';
import Modal from "react-bootstrap/Modal";
import ModalBody from "react-bootstrap/ModalBody";
import ModalHeader from "react-bootstrap/ModalHeader";
import ModalFooter from "react-bootstrap/ModalFooter";
import ModalTitle from "react-bootstrap/ModalTitle";
import 'bootstrap/dist/css/bootstrap.css';

class ForgetPassword extends React.Component{
    constructor(props)
    {
        super(props);
        this.state={
            modalIsOpen:true

        }
    }
    render()
    {
        return (
            <Modal show={this.state.modalIsOpen}>
              <ModalHeader>
                <ModalTitle>Hi</ModalTitle>
              </ModalHeader>
              <ModalBody>asdfasdf</ModalBody>
              <ModalFooter>This is the footer</ModalFooter>
            </Modal>
          );
    }
}
  
export default ForgetPassword;

标签： reactjstypescriptbootstrap-4

Answer 1

您没有在 Modal 组件上设置切换。您需要将toggle道具添加到<Modal>，给它一个函数，当触发该函数时，将切换IsOpenin 道具的值。

import React from "react";
import Modal from "react-bootstrap/Modal";
import ModalBody from "react-bootstrap/ModalBody";
import ModalHeader from "react-bootstrap/ModalHeader";
import ModalFooter from "react-bootstrap/ModalFooter";
import ModalTitle from "react-bootstrap/ModalTitle";
import 'bootstrap/dist/css/bootstrap.css';

class ForgetPassword extends React.Component{
  state = {
    modalIsOpen: true
  }

  toggleModal = () => {
    this.setState(prevState => ({
      modalIsOpen: !prevState.modalIsOpen
    }));
  };

  render() {
    return (
      <Modal show={this.state.modalIsOpen} onHide={this.toggleModal}>
        <ModalHeader>
          <ModalTitle>Hi</ModalTitle>
        </ModalHeader>
        <ModalBody>asdfasdf</ModalBody>
        <ModalFooter>This is the footer</ModalFooter>
      </Modal>
    );
  }
}

export default ForgetPassword;

来源