Wie man react-bootstrap modal programmgesteuert öffnet/schließt?

Question

Ich brauche/close wie

modal zu öffnen

$ (Element) .modal ('show')

Wie das zu tun?

Answer 1

Sie suchen nach dem benutzerdefinierten modalen Trigger, der die OverlayMixin verwendet und Ihnen ermöglicht, den Status des Modales selbst zu verwalten. Sie können steuern, ob das Modal mit this.setState({isModalOpen: true}) angezeigt wird, um das Äquivalent zu dem zu erreichen, was Sie in Ihrem Beitrag im folgenden Beispiel gefordert haben. Der folgende Code ist von der Reaktion-Bootstrap-Website (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); 

UPDATE (4 Aug, 2015)

In der neuesten Version von React-Bootstrap, ob ein modal angezeigt wird oder nicht wird durch eine show Stütze gesteuert, die an das Modal übergeben wird. Die OverlayMixin wird nicht mehr benötigt, um den modalen Zustand zu steuern. Die Steuerung des Zustandes des Modales erfolgt weiterhin über setState, in diesem Beispiel über this.setState({ showModal: true }). Im Folgenden wird anhand des Beispiels auf dem React-Bootstrap Webseite aus:

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

Answer 2

Ihre modal eine show prop haben und eine onHide prop zu bestimmen, wenn es angezeigt wird. Z.B .:

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

Die onHide Funktion ändert einfach showModal staatliches Eigentum. Ihre modal ist/ausgeblendet wurde, basierend auf der übergeordneten Zustand:

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

Wenn Sie das modale innerhalb des modalen selbst schließen möchten, können Sie die onHide Funktion definiert auf der übergeordneten über props auslösen können. Zum Beispiel ist dies eine Taste irgendwo innerhalb des modalen Schließen es:

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

Here is a fiddle diesen Workflow zu simulieren.

Answer 3

öffnen und schließen reagieren-Bootstrap-modal programmatisch/dynamisch aus dem Zustand:

Hier habe ich die ES6 Syntax Klasse Komponente Syntax.

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;