反应模态引导关闭按钮不起作用

Question

我使用 react bootstrap Modal 为 react app 上的提供者添加了逻辑。当我单击关闭按钮时，它不起作用。请找出我的逻辑。

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 };

请帮我解决这个问题。我做了谷歌搜索，但我没有找到这个修复的答案。

Answer 1

Modal 的show 属性采用boolean 值。

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