Come aprire/chiudere react-bootstrap modal a livello di codice?

Question

ho bisogno per aprire/chiudere modale come

$ (elemento) .modal ('show')

come fare?

Answer 1

Quello che stai cercando è il trigger modale personalizzato, che utilizza lo OverlayMixin e ti consente di gestire da solo lo stato del modal. Puoi controllare se la modale è mostrata usando this.setState({isModalOpen: true}) per ottenere l'equivalente di ciò che hai chiesto nel tuo post nell'esempio sotto. Il seguente codice è dal sito web reagiscono-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); 

UPDATE (agosto 4, 2015)

Nella versione più recente di Reagire-Bootstrap, se un modale viene visualizzato o no è controllato da un puntello show che viene passato al modale. Il OverlayMixin non è più necessario per controllare lo stato modale. Il controllo dello stato del modale avviene ancora tramite setState, in questo esempio tramite this.setState({ showModal: true }). Quanto segue è basato fuori l'esempio sul sito 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> 
    ); 
    } 
}); 

Answer 2

tuo modale avrà un show puntello e un onHide puntello per determinare quando è visualizzato. Es .:

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

La funzione onHide cambia semplicemente showModal proprietà dello Stato. Il tuo modale è mostrata/nascosta in base allo stato del genitore:

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

Se vuoi per chiudere la modale dal all'interno del modal in sé, è possibile attivare la funzione onHide definita sul genitore via props. Ad esempio, questo è un pulsante da qualche parte all'interno del modal chiusura:

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

Here is a fiddle simulazione di questo flusso di lavoro.

Answer 3

Aprire e chiudere reagire-bootstrap modale a livello di codice/modo dinamico da parte dello Stato:

Qui ho usato la classe sintassi sintassi componente 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;