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;

Answer 1

您没有在“模态”组件上设置切换。您需要将toggle道具添加到<Modal>，为其提供一个函数，该函数在触发时将在道具中切换IsOpen的值。

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;

Source

Answer 2

bootstrap react文档引用了应该在模式上的onHide属性-单击标题headerButton或非静态背景时触发的回调。如果指定了两者之一，则为必需。

您可能想通过一个函数使用它来将显示模式状态设置为false。

在React中在模态外部单击时，引导模态未关闭

2 个答案: