反应模式 bootstrap closeButton 不工作

Question

我在使用 React bootstrap Modal 的 React 应用程序上为提供者添加了逻辑。当我点击关闭按钮时，它不起作用。请找出我的逻辑。

import React from 'react';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import * as firebase from 'firebase';
import { Modal } from 'react-bootstrap';
     
export class SignInScreen extends React.Component {
    state = {
        show: false
    }

  handleClose = () => {
    this.setState ({show: false})
  }
  handleShow = () => {
    this.setState ({show: true})
  }

  uiConfig = {
    signInFlow: "popup",
    signInOptions: [
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      firebase.auth.TwitterAuthProvider.PROVIDER_ID,
      firebase.auth.GithubAuthProvider.PROVIDER_ID,
      firebase.auth.EmailAuthProvider.PROVIDER_ID
    ]
  }

  render() {
    return (
      <Modal
          show={this.handleShow}
          onHide={this.handleClose}
          dialogClassName="modal-50w"
      >
          <Modal.Header closeButton>
            <Modal.Title>Login using below account</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <StyledFirebaseAuth uiConfig={this.uiConfig} firebaseAuth={firebase.auth()}/>
          </Modal.Body>
      </Modal>
    );
  }
}

export { firebase, database as default };

请帮我解决这个问题。我进行了 google 搜索，但没有找到此修复的答案。

Answer 1

Modal 的

show 属性采用 boolean 值。

show={this.handleShow} 应该是 show={this.state.show}

反应模式 bootstrap closeButton 不工作

React modal bootstrap closeButton not working

javascript

firebase

reactjs

react-bootstrap