How to customize react-bootstrap modal - reactjs

Question

Suppose I have a modal like as follows and I would like it such that, when the modal is showing at that time I also want to work on the background.
In the following code, there is a textbox. I want to work with the textbox(or an audio) when the model is appearing.
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

I hope the below example flow addresses your requirement.
More form the comments in code.
i.e onClick calls wrapper function which has open method for modal together with your 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;