Question

你好，我需要帮助显示一个bootstrap模态

 import React from 'react';
    import styles from '../App.css';
    import styles from '../../../public/css/app.css';

    import Button from 'react-bootstrap/lib/Button';
    import Modal from 'react-bootstrap/lib/Modal';


    export default class Edit extends React.Component {
      constructor(props) {
    super(props);

    console.log(props)

    this.state=  { showModal: false };

    this.state = {showModal:true};
    this.open = this.open.bind(this);
    this.close = this.close.bind(this);
    }


    close() {
      this.setState({ showModal: false });
    }

    open() {
      alert("open modal")
      this.setState({ showModal: true });
    }


    render() {

      return (
      <div>
        <p>Click to get the full Modal experience!</p>

        <Button
          bsStyle="primary"
          bsSize="large"
          onClick={this.open.bind(this)}
        >
          Launch demo modal
        </Button>

        <Modal show={this.state.showModal} onHide={this.close}>
          <Modal.Header closeButton>
            <Modal.Title>Modal heading</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <h4>Text in a modal</h4>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

            <hr />

            <h4>Overflowing text to show scroll behavior </h4>
            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.close}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>

    );
  }
  }

模态没有显示任何建议？

我跟着反应引导文件和babel es6推荐。

Answer 1

如果您最终想要在您的反应应用程序中再次使用引导程序，请使用reactstrap http://reactstrap.github.io/components/modals/

反应bootstrap模态es6

1 个答案: