如何使用React-Bootstrap模式

Question

我是React的新手，我想使用React-Bootstrap模態。此代碼工作得很好，但我想要做的不是在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到部件，聽（通過。componentWillReceiveProps()）prop變化。 在內部，我們維護一個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') 
);