React-Bootstrap多模态 [英] React-Bootstrap Multiple Modal

问题描述

我在我的项目中使用React-bootstrap. 我需要打开多个对话框. 有什么办法可以做到这一点?

I am using React-bootstrap in my project. I need to open multiple dialog. Is there any way to achieve this?

注意: 在此处可以找到引导程序的答案，但在react-bootstrap中不起作用. 谢谢.

Note: There is answers for bootstrap here but it does not work in react-bootstrap. Thanks.

推荐答案

我们只是通过将每个过程传递给不同的ID，然后将显示"状态设置为该模式来处理多个模式:

we just handled multiple modals by having each pass in a different id and then setting the 'show' state to that:

https ://github.com/AgileVentures/agile-ventures-website-react-front-end/blob/4_homepage_changes_mob/src/App.js#L26

class App extends Component {

  constructor(props, context) {
    super(props, context);

    this.handleShow = this.handleShow.bind(this);
    this.handleClose = this.handleClose.bind(this);

    this.state = {
      show: null
    };
  }

  handleClose() {
    this.setState({show: id});
  }

  handleShow(id) {
    this.setState({show: id});
  }

  render() {
    return (
      <div className="App">

        <Grid>
          <Row>
            <Col xsOffset={1} sm={5}>
              <Button bsStyle="primary" bsSize="large" onClick={() => this.handleShow('here')}>
                <h1>You are here!</h1>
              </Button>
              <Modal
                show={this.state.show == 'here'} onHide={this.handleClose}
              >
                <Modal.Header closeButton closeLabel="close window">
                </Modal.Header>
                <Modal.Body>
                  <p className='landing-page-markers you-are-here'>Tired of toy projects, tutorials and online courses?
                      <img src={logo} className="App-logo" alt="logo" />
                  </p>
                </Modal.Body>
              </Modal>
            </Col>
          </Row>
          ... more modals passing in different ids ...

这篇关于React-Bootstrap多模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！