React-Bootstrap Modalの使い方

Question

私はReactを初めて使用しているので、React-Bootstrap Modalを使いたいです。このコードはうまく機能しますが、Triggerコンポーネントの中にボタンを置くのではなく、親コンポーネントのボタンからTriggerコンポーネントを呼び出すことができます。

let Button = ReactBootstrap.Button; 
let Modal = ReactBootstrap.Modal; 

class Trigger extends React.Component{ 
    constructor(props){ 
     super(props); 
     this.state = { show: false }; 
    } 
    render(){ 
     let close =() => this.setState({ show: false}); 
     return (
     <div className="modal-container" style={{height: 1000}}> 
     <Button 
      bsStyle="primary" 
      bsSize="large" 
      onClick={() => this.setState({ show: true})} 
     > 
      Launch contained modal 
     </Button> 

     <Modal 
      show={this.state.show} 
      onHide={close} 
      container={this} 
      aria-labelledby="contained-modal-title" 
     > 
      <Modal.Header closeButton> 
      <Modal.Title id="contained-modal-title">Edit Recipe</Modal.Title> 
      </Modal.Header> 
      <Modal.Body> 
       <form className="form-group"> 
        <label>Recipe</label> 
        <input type='text' className="form-control"/> 
        <label>Ingredients</label> 
        <textarea type='text' className="form-control"/> 
       </form> 
      </Modal.Body> 
      <Modal.Footer> 
       <Button bsStyle="primary">Edit Recipe</Button> 
      <Button onClick={close}>Close</Button> 
      </Modal.Footer> 
     </Modal> 
     </div> 
    ); 
    } 
} 

Answer 1

あなたのコードを観察する上で、一つはモーダルのはButtonののonClickを立ち上げ得ることを見つけることができます。コンポーネントの対応する状態の変更は、その状態のshowプロパティです。

私は外部からモーダルを制御する方法を示すために以下のjsFiddleを作成しました。要旨において

https://jsfiddle.net/sunnykgupta/5qrzt9uy/

、我々は、コンポーネントにpropを受け入れてprop変化（componentWillReceiveProps()を介して）に耳を傾けます。 内部的には、モーダルショーのステータスを追跡するために、stateを維持しています。

コード：

let Button = ReactBootstrap.Button; 
let Modal = ReactBootstrap.Modal; 

class Trigger extends React.Component{ 
    constructor(props){ 
     super(props); 
     this.state = { show: props.modal }; 
    } 
    componentWillReceiveProps(nextProps){ 
     if(this.state.show!==nextProps.modal){ 
     this.setState({show: nextProps.modal}) 
     } 
    } 
    render(){ 
     let close =() => this.setState({ show: false}); 
     return (
     <div className="modal-container"> 
     <Modal 
      show={this.state.show} 
      onHide={close} 
      container={this} 
      aria-labelledby="contained-modal-title" 
     > 
      <Modal.Header closeButton> 
      <Modal.Title id="contained-modal-title">Edit Recipe</Modal.Title> 
      </Modal.Header> 
      <Modal.Body> 
       <form className="form-group"> 
        <label>Recipe</label> 
        <input type='text' className="form-control"/> 
        <label>Ingredients</label> 
        <textarea type='text' className="form-control"/> 
       </form> 
      </Modal.Body> 
      <Modal.Footer> 
       <Button bsStyle="primary">Edit Recipe</Button> 
      <Button onClick={close}>Close</Button> 
      </Modal.Footer> 
     </Modal> 
     </div> 
    ); 
    } 
} 

class Parent extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state = {show: false} 
    } 
    render(){ 
    return <main> 
     <Trigger modal={this.state.show}/> 
     <Button 
     bsStyle="primary" 
     bsSize="large" 
     onClick={() => this.setState({ show: true})} 
     > 
     Launch contained modal 
     </Button> 
    </main> 
    } 
} 

ReactDOM.render(
    <Parent/>, 
    document.getElementById('container') 
);