web-dev-qa-db-fra.com

Comment ouvrir / fermer le modal react-bootstrap par programmation?

J'ai besoin d'ouvrir/fermer le modal comme

$ (élément) .modal ('show')

Comment faire ça?

twitter-bootstrapreactjsreact-bootstrap
24
Igor Babkin

Ce que vous recherchez est le déclencheur modal personnalisé, qui utilise le OverlayMixin et vous permet de gérer vous-même l'état du modal. Vous pouvez contrôler si le modal est affiché en utilisant this.setState({isModalOpen: true}) pour obtenir l'équivalent de ce que vous avez demandé dans votre article dans l'exemple ci-dessous. Le code suivant provient du site 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);

MISE À JOUR (4 août 2015)

Dans la dernière version de React-Bootstrap, qu'un modal soit affiché ou non est contrôlé par un accessoire show qui est passé au modal. OverlayMixin n'est plus nécessaire pour contrôler l'état modal. Le contrôle de l'état du modal se fait toujours via setState, dans cet exemple via this.setState({ showModal: true }). Ce qui suit est basé sur l'exemple du site 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>
    );
  }
});
34
Mark

Votre modal aura un show prop et un onHide prop pour déterminer quand il sera affiché. Par exemple.:

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

La fonction onHide modifie simplement la propriété d'état showModal. Votre modal est affiché/masqué en fonction de l'état du parent:

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

Si vous souhaitez fermer le modal depuis le modal lui-même, vous pouvez déclencher la fonction onHide définie sur le parent via props. Par exemple, ceci est un bouton quelque part à l'intérieur du modal le fermant:

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

Voici un violon simulant ce workflow.

11
Jan Klimo

Ouvrez et fermez modal react-bootstrap par programmation/dynamiquement à partir de l'état:

Ici, j'ai utilisé la syntaxe du composant de classe de syntaxe 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;
1
Md. Mahmudur Rahman

Vous pouvez le faire avec React hooks . (Inclus dans 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;
0
Zakher Masri