使用ReactJS

Question

我使用Bootstrap制作了一个模态，但我需要一个高于它的确认模式。当按下第一个模态按钮之一时，第二个将显示为确认对话框。

这大致与我的代码类似：

constructor(props) {
    super(props)

    this.state = {
      displayConfirmModal: false
    }
  }

  confirmModal () {
    return (
      <div ref={(ref) => { (this.modal = ref) }} className='modal fade' id='confirm' tabIndex={-1} role='dialog' aria-labelledby='GPA Modal'>
        <section>
          <h3>Are you sure of this?</h3>

          <button
          className='btn btn-danger'
          onClick={()=> doTheThing()}>
            Yes
          </button>
          <button
           className='btn btn-danger'
           onClick={()=> hideConfirmModal()}>
            No
          </button>
        </section>
      </div>
    )
  }

  render () {
    return (
      <div>
        <div ref={(ref) => { (this.modal = ref) }} className='modal fade' id='main' tabIndex={-1} role='dialog' aria-labelledby='GPA Modal'>
          <section>
            <a className='close' data-dismiss='modal' aria-label='Close' onClick={() => this.hideModal()}>close</a>
            <div className='frame'>
              <h1>My first modal</h1>

              <button
              className='btn btn-default'
              onClick={() => { this.setState({displayConfirmModal: true})}}>
                 Open confirmation modal
              </button>
            </div>
          </section>
      </div>
      { this.state.displayConfirmModal ? this.confirmModal() : null }
    </div>
    )
  }

现在，当我点击Open confirmation modal按钮时，它会将我的displayConfirmModal状态设置为true，但不会显示该模式。

但是，如果我在true上启动displayConfirmModal状态，它会显示它，当我关闭它时，它会关闭整个事件。

我该怎么做？如果是这样，有没有更好的替代方法呢？

谢谢！