Как открыть/закрыть реактивную загрузку модально программно?

Question

мне нужно, чтобы открыть/закрыть модальное как

$ (элемент) .modal ('шоу')

Как сделать это?

Answer 1

То, что вы ищете, является специальным модальным триггером, который использует OverlayMixin и позволяет вам управлять состоянием модала самостоятельно. Вы можете контролировать, отображается ли модальное значение с помощью this.setState({isModalOpen: true}), чтобы достичь эквивалента того, что вы просили в своем сообщении, в приведенном ниже примере. Следующий код из среагировать-самозагрузку сайта (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 августа 2015)

В новейшей версии React-Bootstrap, показан ли модальный или нет управляется опорой show, которая передается модальному. OverlayMixin больше не требуется для управления модальным состоянием. Управление состоянием модальности все еще выполняется через setState, в этом примере через this.setState({ showModal: true }). Ниже базируется пример на сайте 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

Ваш модальный будет иметь show опору и onHide опору, чтобы определить, когда он появится. Например .:

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

onHide функция просто меняет showModal госсобственность. Ваш модальный показано/скрыты в зависимости от состояния родителей:

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

Если вы хотите, чтобы закрыть модальные внутри сам модальный, вы можете вызвать функцию, определенную на onHide родителя через props. Например, это кнопка где-то внутри модального закрытия его:

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

Here is a fiddle имитируя этот процесс.

Answer 3

Открытие и закрытие реагирует-самозагрузка модальных программно/динамически из состояния:

Здесь я использовал синтаксис класса компонентов синтаксиса 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;