如何自定義反應，自舉模式

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;