React Bootstrap Modal可正常打开但无法关闭的问题如何解决？

问题原因 #

你遇到的问题是事件冒泡导致的：你将整个<Modal>组件嵌套在了绑定了onClick={this.openModal}的<div className='wbtn'>元素内部。当你点击模态框的关闭按钮、右上角关闭叉号、模态框外部遮罩层触发closeModal将showlogin设为false后，点击事件会向上冒泡到外层的<div className='wbtn'>，再次触发openModal将showlogin设回true，所以视觉上看起来模态框完全无法关闭。

解决方案 #

更推荐的优化方式是调整组件结构，将Modal从触发点击的div内部移出，放到无额外点击事件绑定的外层节点，修改后的render部分示例如下：

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>
        
        {/* 触发模态框的按钮容器，内部不再嵌套Modal */}
        <div className='wbtn' onClick={this.openModal}>
          <h3><i className="fas fa-exclamation-triangle"></i>Connect|Login<i className='fas fa-exchange-alt'></i></h3>
        </div>
     
        <Container>
          <InputGroup className="mb-3">
              <InputGroup.Text id="basic-addon1"><i className="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 className="fa fa-home" aria-hidden="true"></i>
                    Home
                    <div className='arrow'>
                      <i className="fa fa-angle-double-right" ></i>
                    </div>
                  </li>
                </Nav.Link>
                <Nav.Link className='linkitem'>
                  <li onClick={this.accountpage}>
                    <i className="fa fa-cog" aria-hidden="true"></i>
                    Account
                    <div className='arrow'>
                      <i className="fa fa-angle-right"></i>
                    </div>
                  </li>
                </Nav.Link>
                <Nav.Link className='linkitem'>
                  <li onClick={this.poolpage}>
                    <i className="fa fa-rocket" aria-hidden="true"></i>
                        Pool
                        <div className='arrow'>
                      <i className="fa fa-angle-right"></i>
                        </div>
                    </li>  
                  </Nav.Link>
                  <Nav.Link className='linkitem'>
                  <li onClick={this.loanpage}>
                    <i className="fa fa-university" aria-hidden="true"></i>
                      Loan|Borrow
                      <div className='arrow'>
                      <i className="fa fa-angle-right"></i>
                    </div>
                  </li>
                </Nav.Link>
                <Nav.Link className='linkitem'>
                  <li onClick={this.adpage}>
                    <i className="fa fa-plus" aria-hidden="true"></i>
                      Ads(earn crypto)
                      <div className='arrow'>
                      <i className="fa fa-angle-right"></i>
                    </div>
                  </li>
                </Nav.Link>
                <Nav.Link className='linkitem'>
                  <li onClick={this.statspage}>
                    <i className="fa fa-signal" aria-hidden="true"></i>
                      Stats
                      <div className='arrow'>
                      <i className="fa fa-angle-right"></i>
                    </div>
                  </li>
                </Nav.Link>
                </div>  
              </ul>
          </Nav>
        </Container>
        <div className='footy'>
        <Foot />
        </div>
      </Navbar> 
      {/* Modal移到外层，避免触发父元素的openModal */}
      <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>
      {this.state.content}
    </div>
  )
}

如果你不想调整结构，也可以直接给Modal组件添加点击事件阻止冒泡：

<Modal 
  show={this.state.showlogin} 
  onHide={this.closeModal} 
  size='lg' 
  centered
  onClick={e => e.stopPropagation()}
>

调整后即可正常关闭模态框。

内容的提问来源于stack exchange，提问作者thomas305