为什么Modal打开但没有关闭

Question

晚上好，我正在学习模态，但我运行遇到了一个问题，openModal() 函数工作正常，但我无法关闭它...

代码：

import React, { Component } from 'react';
import './Navbar.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Container, Navbar, NavbarBrand, Nav, InputGroup, FormControl, Modal, Button, ButtonGroup } from 'react-bootstrap';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';
import Foot from './Footer'
import Today from '../Main/Home'
import Account from '../AccountPage/Account'
import Pool from '../PoolPage/Pool'
import Stats from '../StatsPage/Stats'
import BondingCard from '../BondPage/BondCard'
import AdCard from '../AdPage/AdHome'


library.add(fab)

  class Navy extends Component  {
    constructor(props) {
      super(props);
      this.state = {
          content: <Today />,
          showlogin: false
      }
      this.homepage = this.homepage.bind(this);
      this.accountpage = this.accountpage.bind(this);
      this.statspage = this.statspage.bind(this);
      this.poolpage = this.poolpage.bind(this);
      this.loanpage = this.loanpage.bind(this);
      this.adpage = this.adpage.bind(this);
      this.openModal = this.openModal.bind(this);
      this.closeModal = this.closeModal.bind(this);
    }
     homepage()  {
      this.setState({content: <Today/>});
    }
    accountpage()  {
      this.setState({content: <Account/>})
    }
    statspage() {
      this.setState({content: <Stats/>})
    }

    poolpage()  {
      this.setState({content: <Pool/>})
    }

    loanpage() {
      this.setState({content: <BondingCard/>})
    }

    adpage() {
      this.setState({content: <AdCard/>})
    }

    openModal() {
      this.setState({ showlogin: true });
    } 

    closeModal() {
      this.setState({ showlogin: false });
    } 
    
     render() {



           return ( 
             <div>
           <Navbar bg='light' variant='light' >

            <div className='logo'>
              <Container >
                <NavbarBrand className='brandcolor'>
                  <h1>ETHER<span>SHARE<i className="fab fa-ethereum"></i></span></h1>
                </NavbarBrand>
              </Container>
            </div>
            
                <div className='wbtn' onClick={this.openModal}>
                    <h3><i class="fas fa-exclamation-triangle"></i>Connect|Login<i class='fas fa-exchange-alt'></i></h3>

                    <Modal show={this.state.showlogin} onHide={this.closeModal} size='lg' centered>
                      <Modal.Header closeButton>
                        <Modal.Title className='cent'>
                          <ButtonGroup size="sm" className="mb-2">
                          <Button variant='dark'>Login</Button>
                          <Button variant='dark'>Register</Button>
                        </ButtonGroup>
                        </Modal.Title>
                      </Modal.Header>
                      <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
                      <Modal.Footer>
                          <Button variant="secondary" onClick={this.closeModal}>
                                Close
                          </Button>
                          <Button variant="primary" onClick={this.closeModal}>
                              Save Changes
                          </Button>
                      </Modal.Footer>
                   </Modal>
                </div>
           
            <Container>
              <InputGroup className="mb-3">
                  <InputGroup.Text id="basic-addon1"><i class="fas fa-user-plus" aria-hidden="true"></i></InputGroup.Text>
                      <FormControl
                          placeholder="@username (search)"
                          aria-label="Username"
                          aria-describedby="basic-addon1"
                            />
                </InputGroup>
            </Container>
            <Container >
              <Nav >
                  <ul className='menuItems'>
                  <div className='mainmenu'>
                    <Nav.Link className='linkitem'>
                       <li onClick={this.homepage}> 
                        <i class="fa fa-home" aria-hidden="true"></i>
                        Home
                        <div className='arrow'>
                          <i class="fa fa-angle-double-right" ></i>
                        </div>
                      </li>
                    </Nav.Link>
                    <Nav.Link className='linkitem'>
                      <li onClick={this.accountpage}>
                        <i class="fa fa-cog" aria-hidden="true"></i>
                        Account
                        <div className='arrow'>
                          <i class="fa fa-angle-right"></i>
                        </div>
                      </li>
                    </Nav.Link>
                    <Nav.Link className='linkitem'>
                      <li onClick={this.poolpage}>
                        <i class="fa fa-rocket" aria-hidden="true"></i>
                            Pool
                            <div className='arrow'>
                          <i class="fa fa-angle-right"></i>
                            </div>
                        </li>  
                      </Nav.Link>
                      <Nav.Link className='linkitem'>
                      <li onClick={this.loanpage}>
                        <i class="fa fa-university" aria-hidden="true"></i>
                          Loan|Borrow
                          <div className='arrow'>
                          <i class="fa fa-angle-right"></i>
                        </div>
                      </li>
                    </Nav.Link>
                    <Nav.Link className='linkitem'>
                      <li onClick={this.adpage}>
                        <i class="fa fa-plus" aria-hidden="true"></i>
                          Ads(earn crypto)
                          <div className='arrow'>
                          <i class="fa fa-angle-right"></i>
                        </div>
                      </li>
                    </Nav.Link>
                    <Nav.Link className='linkitem'>
                      <li onClick={this.statspage}>
                        <i class="fa fa-signal" aria-hidden="true"></i>
                          Stats
                          <div className='arrow'>
                          <i class="fa fa-angle-right"></i>
                        </div>
                      </li>
                    </Nav.Link>
                    </div>  
                  </ul>
              </Nav>
            </Container>
            <div className='footy'>
            < Foot />
            </div>
          </Navbar> 
          {this.state.content}
          
          </div>
          
          
          )
           
        
     }
    };


export default Navy;

有谁知道我做错了什么？我的 2 个函数出错了吗？这是整个文件，一切正常，但 closeModal()...

dddddddddddddddddddddddddddddddddddddddddd dddddddddddddddddddddddd dddddddddd

Answer 1

你需要用到setTimeOut，请试试我的实验

Here

closeModal() {
    let vm = this;
    setTimeout(() => {
        vm.setState({ showlogin: false });
    }, 100);
}

为什么Modal打开但没有关闭

Why is Modal opening but not closing

reactjs

react-bootstrap