Soy nuevo en React y quiero usar React-Bootstrap Modal. Este código funciona muy bien, pero lo que quiero hacer es en lugar de tener un botón dentro del componente Trigger, lo quiero en otro componente principal para poder llamar al componente Trigger desde un botón en un componente principal.
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> ); } }Al observar su código, uno puede encontrar que Modal se inicia al hacer clic en el Button . El cambio de estado correspondiente en el componente es la propiedad show de su estado.
Hice el siguiente jsFiddle para mostrar cómo puede controlar el modal externamente.
https://jsfiddle.net/sunnykgupta/5qrzt9uy/
En resumen, aceptamos una prop en el componente y escuchamos los cambios de la prop (a través de componentWillReceiveProps() ). Internamente, mantenemos un state para rastrear el estado del espectáculo modal.
Código:
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') );