web-dev-qa-db-ja.com

プログラムで反応ブートストラップモーダルを開く/閉じる方法？

様モーダルを開く/閉じる必要があります

$（element）.modal（ 'show'）

どうやってするか？

twitter-bootstrapreactjsreact-bootstrap
24
Igor Babkin

探しているのは、OverlayMixinを使用し、自分でモーダルの状態を管理できるカスタムモーダルトリガーです。 this.setState({isModalOpen: true})を使用してモーダルを表示するかどうかを制御し、以下の例の投稿で求めたものと同等のものを実現できます。次のコードは、react-bootstrap Webサイトからのものです（ 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);
_

更新（2015年8月4日）

React-Bootstrapの最新バージョンでは、モーダルが表示されるかどうかは、モーダルに渡されるshow propによって制御されます。モーダル状態を制御するためにOverlayMixinは不要になりました。モーダルの状態の制御は、依然としてsetStateを介して、この例ではthis.setState({ showModal: true })を介して行われます。以下は、React-Bootstrap Webサイトの例に基づいています。

_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>
    );
  }
});
_
34
Mark

モーダルには、show propとonHide propがあり、表示するタイミングを決定します。例えば。：

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

onHide関数は、単にshowModal stateプロパティを変更します。モーダルは、親の状態に基づいて表示/非表示されます：

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

モーダル自体の中からモーダルを閉じたい場合は、onHide経由で親で定義されたprops関数をトリガーできます。たとえば、これはモーダルを閉じるボタンです。

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

こちらがフィドルです このワークフローをシミュレートしています。

11
Jan Klimo

状態からプログラム/動的に反応ブートストラップモーダルを開閉します。

ここでは、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;
1
Md. Mahmudur Rahman

React hooks 。（React 16.8）に含まれています）

import React, { useState } from "react";
import { Modal, Button } from "react-bootstrap";

const ComponentWithModal = props => {
  const [isModalOpen, setModalStatus] = useState(false);

  return (
    <div>
      <div>I am a Bootstrap Modal</div>
      <Button onClick={() => setModalStatus(true)}>Show Modal</Button>
      <div>
        <Modal
          className="modal-container"
          show={isModalOpen}
          onHide={() => setModalStatus(false)}
        >
          <Modal.Header closeButton>
            <Modal.Title>Modal title</Modal.Title>
          </Modal.Header>

          <Modal.Body>Modal content here</Modal.Body>

          <Modal.Footer>
            <Button onClick={() => setModalStatus(false)}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    </div>
  );
};

export default ComponentWithModal;
0
Zakher Masri