Как настроить реакцию-bootstrap modal

Question

Предположим, что у меня модальный, как и ниже, и я бы хотел, чтобы он, когда модальный показ в это время, я также хочу работать на фоне. В следующем коде есть текстовое поле. Я хочу работать с текстовым полем (или аудио) при появлении модели.

import React, { Component, PropTypes } from 'react'; 
import ReactDOM from 'react-dom'; 
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" id="demo-class" ref={node => this.chart = node} 
      show={this.state.showModal} 
      onHide={this.close} 
      bsSize="small" backdrop={false} 
      > 

      <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> 
     <Button onClick={this.open}>Show Modal</Button> 
     <input type="text" /> 
     </div> 
    </div> 
    ); 
    } 
} 

export default GenericModal; 

Answer 1

Надеюсь, что приведенный ниже пример потока соответствует вашему требованию.

Подробнее об этом комментарии.

onClick т.е. вызывает функцию-оболочку, которая имеет open метод modal вместе с вашим customizations.

import React, { Component, PropTypes } from 'react'; 
import ReactDOM from 'react-dom'; 
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() { 
    let _this = this; 
    this.setState({showModal: true}, function(){ 
    //state is set, i.e modal is loaded in view 
    //here you can do whatever like stopping audio 
    //_this.stopAudio(); 
    }); 
} 

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

playSomeAudio(){ 
    //playAudio(); 
} 

stopAudio(){ 
    //stop the audio 
} 

doSomethingBeforeOpen(){ 
    var _this = this; 
    //do whatever you want before opening model. i.e palying audio 
    //1. in sync: 
    this.playSomeAudio(); //audio starts palying before modal starts triggered 
    //2. in async 
    setTimeOut(() => {_this.playSomeAudio()}, 1); //async by setTimeout, keep your own time 
    //Or any 
    this.open(); //opens modal 
} 

render() { 
    return(
    <div> 
     <div>I am a Bootstrap Modal</div> 
     <Button onClick={this.doSomethingBeforeOpen.bind(this)}>Show Modal</Button> 
     <div> 
     <Modal className="modal-container" id="demo-class" ref={node => this.chart = node} 
      show={this.state.showModal} 
      onHide={this.close} 
      bsSize="small" backdrop={false} 
      > 

      <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> 
     <Button onClick={this.doSomethingBeforeOpen.bind(this)}>Show Modal</Button> 
     <input type="text" /> 
     </div> 
    </div> 
    ); 
    } 
} 

export default GenericModal;