tutorial reactstrap react example bootstrap twitter-bootstrap reactjs react-bootstrap

twitter-bootstrap - example - reactstrap



¿Cómo abrir/cerrar el modo react-bootstrap mediante programación? (3)

Necesito abrir / cerrar modal como

$ (elemento) .modal (''show'')

¿Como hacer eso?


Abra y cierre react-bootstrap modal mediante programación / dinámica desde el estado:

Aquí utilicé la sintaxis de la clase de sintaxis ES6.

import React, { Component, PropTypes } from ''react''; import { Modal, Button } from ''react-bootstrap''; import ''./GenericModal.scss''; class GenericModal extends Component { constructor(props, context) { super(props, context); this.state = { showModal: false }; this.open = this.open.bind(this); this.close = this.close.bind(this); } open() { this.setState({showModal: true}); } close() { this.setState({showModal: false}); } render() { return( <div> <div>I am a Bootstrap Modal</div> <Button onClick={this.open}>Show Modal</Button> <div> <Modal className="modal-container" show={this.state.showModal} onHide={this.close} animation={true} bsSize="small"> <Modal.Header closeButton> <Modal.Title>Modal title</Modal.Title> </Modal.Header> <Modal.Body> One of fine body......... </Modal.Body> <Modal.Footer> <Button onClick={this.close}>Close</Button> <Button bsStyle="primary">Save changes</Button> </Modal.Footer> </Modal> </div> </div> ); } } export default GenericModal;


Su modal tendrá un prop de show y un prop onHide para determinar cuándo se mostrará. P.ej:

<Modal show={this.state.showModal} onHide={this.close}>

La función onHide simplemente cambia la propiedad del estado showModal . Su modal se muestra / oculta según el estado del padre:

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

Si desea cerrar el modal desde el modal mismo, puede activar la función onHide definida en el padre a través de props . Por ejemplo, este es un botón en algún lugar dentro del modal que lo cierra:

<button type="button" className="close" onClick={this.props.onHide}> <span>&times;</span> </button>

Aquí hay un violín que simula este flujo de trabajo.


Lo que está buscando es el disparador modal personalizado, que utiliza OverlayMixin y le permite administrar el estado del modal usted mismo. Puede controlar si se muestra el modal utilizando this.setState({isModalOpen: true}) para lograr el equivalente de lo que solicitó en su publicación en el siguiente ejemplo. El siguiente código proviene del sitio web react-bootstrap ( http://react-bootstrap.github.io/components.html#modals ):

const CustomModalTrigger = React.createClass({ mixins: [OverlayMixin], getInitialState() { return { isModalOpen: false }; }, handleToggle() { this.setState({ isModalOpen: !this.state.isModalOpen }); }, render() { return ( <Button onClick={this.handleToggle} bsStyle=''primary''>Launch</Button> ); }, // This is called by the `OverlayMixin` when this component // is mounted or updated and the return value is appended to the body. renderOverlay() { if (!this.state.isModalOpen) { return <span/>; } return ( <Modal bsStyle=''primary'' title=''Modal heading'' onRequestHide={this.handleToggle}> <div className=''modal-body''> This modal is controlled by our custom trigger component. </div> <div className=''modal-footer''> <Button onClick={this.handleToggle}>Close</Button> </div> </Modal> ); } }); React.render(<CustomModalTrigger />, mountNode);

ACTUALIZACIÓN (4 de agosto de 2015)

En la versión más reciente de React-Bootstrap, si un modal se muestra o no se controla mediante un show prop que se pasa al modal. OverlayMixin ya no es necesario para controlar el estado modal. El control del estado del modal todavía se realiza a través de setState , en este ejemplo a través de this.setState({ showModal: true }) . Lo siguiente se basa en el ejemplo del sitio web React-Bootstrap:

const ControlledModalExample = React.createClass({ getInitialState(){ return { showModal: false }; }, close(){ this.setState({ showModal: false }); }, open(){ this.setState({ showModal: true }); }, render() { return ( <div> <Button onClick={this.open}> Launch modal </Button> <Modal show={this.state.showModal} onHide={this.close}> <Modal.Header closeButton> <Modal.Title>Modal heading</Modal.Title> </Modal.Header> <Modal.Body> <div>Modal content here </div> </Modal.Body> <Modal.Footer> <Button onClick={this.close}>Close</Button> </Modal.Footer> </Modal> </div> ); } });