は、ブートストラップモーダルES6

Question

に反応こんにちは、私はモーダルで任意の提案を示していない？ブートストラップモーダル

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> 

    ); 
    } 
    } 

を表示する助けが必要

私は、ブートストラップ文書とバベルes6勧告に従いました。

Answer 1

あなたがもう一度あなたの反応アプリケーションにブートストラップを望んで終わる場合は、単にコードのこの部分に「バインド（これを）」あなたが置く必要はありません、reactstraphttp://reactstrap.github.io/components/modals/

Answer 2

は、冗長性を回避するために使用します。

このように、コードの別の部分（上部、コンストラクタ内）に「バインド（これ）」がすでに記述されています。