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;

如何自定义react-bootstrap模式

1 个答案: