Comment ouvrir/fermer réagir-modal bootstrap par programmation?

Ce que vous cherchez est la coutume modal de déclenchement, qui utilise le OverlayMixin et vous permet de gérer la modale de l'état vous-même. Vous pouvez contrôler si le modal est indiqué à l'aide d' this.setState({isModalOpen: true}) pour atteindre l'équivalent de ce que vous avez demandé dans votre poste dans l'exemple ci-dessous. Le code suivant est à partir de la réaction de bootstrap site web (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);

Mise à JOUR (le 4 Août, 2015)

Dans la nouvelle version de Réagir-Bootstrap, si modale est affichée ou pas est contrôlé par un show prop qui est passé à la modale. Le OverlayMixin n'est plus nécessaire au contrôle de l'état modal. Le contrôle de l'état de l'modal se fait toujours via setState, dans cet exemple via this.setState({ showModal: true }). Ce qui suit est basé sur l'exemple de la Réaction de Bootstrap site web:

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

Ouvrir et fermer réagir-modal bootstrap par programme/dynamiquement à partir de l'état:

Ici, j'ai utilisé l'ES6 syntaxe composant de classe de la syntaxe.

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;