twitter-bootstrap - example - reactstrap

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

Question

Necesito abrir / cerrar modal como

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

¿Como hacer eso?

Answer 1

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;

Answer 2

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.

Answer 3

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>
);
}
});