¿Cómo abrir / cerrar react-bootstrap modal programáticamente?

Solución:

Lo que está buscando es el disparador modal personalizado, que utiliza el OverlayMixin y le permite administrar el estado del modal usted mismo. Puede controlar si el modal se muestra usando this.setState({isModalOpen: true}) para lograr el equivalente de lo que solicitó en su publicación en el siguiente ejemplo. El siguiente código es 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 es controlado por un show prop que se pasa al modal. los 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>
    );
  }
});

Tu modal tendrá un show prop y un onHide prop para determinar cuándo se muestra. P.ej:

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

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

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

Si desea cerrar el modal desde el propio modal, puede activar el onHide función definida en el padre vía 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 simulando este flujo de trabajo.

Puedes hacerlo con React hooks. (Incluido en React 16.8)

import React, { useState } from "react";
import { Modal, Button } from "react-bootstrap";

const ComponentWithModal = props => {
  const [isModalOpen, setModalStatus] = useState(false);

  return (
    <div>
      <div>I am a Bootstrap Modal</div>
      <Button onClick={() => setModalStatus(true)}>Show Modal</Button>
      <div>
        <Modal
          className="modal-container"
          show={isModalOpen}
          onHide={() => setModalStatus(false)}
        >
          <Modal.Header closeButton>
            <Modal.Title>Modal title</Modal.Title>
          </Modal.Header>

          <Modal.Body>Modal content here</Modal.Body>

          <Modal.Footer>
            <Button onClick={() => setModalStatus(false)}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    </div>
  );
};

export default ComponentWithModal;

---

---

Utiliza Nuestro Buscador