Reactjs 如何在同一页面中使用多个模式？ 类仪表板扩展组件{ 建造师（道具）{ 超级（道具）； 此.state={ 秀:假,， 味精：错 } } handelModal1（）{ this.setState（{show:！this.state.show}） } handelModal2（）{ this.setState（{msg:！this.state.msg}） } render（）{ 返回( {this.handelModal1（）}} 一 模态一 你好 {this.handelModal1（）}}> 好啊 {this.handelModal2（）}} 二 模态二 你好 {this.handelModal2（）}}> 好啊 ) }

我试图在同一页上使用两个情态动词。 第一个模式正在工作，我正在弹出窗口，但是第二个模式正在工作。 当我点击第二个模式时，没有弹出窗口。有什么简单的方法可以在同一页上使用两个模态吗？

您必须设置

，而不是

或

---

从第一个模态开始，这个链接可能会帮助您

，似乎您的模态是由一个prop

show={this.state.show}

控制的。在第二个模态集中，

show={this.state.msg}

而不是

msg={this.state.msg}

。因为我不知道它的内部实现，所以我正在对模态属性

show

进行假设。它的结果与第一个模态相同。你说的与第一个模态相同是什么意思？也许你可以为Clarity添加一些问题截图，结果与第一个模式相同

class dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
      msg: false
    }
  }
  handelModal1() {
    this.setState({ show: !this.state.show })
  }
  handelModal2() {
    this.setState({ msg: !this.state.msg })
  }

  render() {
    return (
    <div>
      <>
        <Button variant="primary" onClick={() => { this.handelModal1() }} 
          one
        </Button>

        <Modal show={this.state.show} >
          <Modal.Header>
            <Modal.Title>Modal one</Modal.Title>
          </Modal.Header>
          <Modal.Body> hello </Modal.Body>
          <Modal.Footer>
            <Button onClick={() => { this.handelModal1() }}>
              OK
           </Button>
          </Modal.Footer>
        </Modal>
      </>
    </div>

    <div>
      <>
        <Button variant="primary" onClick={() => { this.handelModal2() }}
          two
        </Button>

        <Modal msg={this.state.msg} >
          <Modal.Header>
            <Modal.Title>Modal two</Modal.Title>
          </Modal.Header>
          <Modal.Body> hello </Modal.Body>
          <Modal.Footer>
            <Button onClick={() => { this.handelModal2() }}>
              OK
            </Button>
          </Modal.Footer>
        </Modal>
      </>
   </div>
  )
}