React.jsでBootstrapのモーダルを操作する

React.jsでBootstrapを使った画面でモーダルを操作する方法です。

React.jsからBootstrapを使う場合は、npmライブラリの「React-Bootstrap」を使うとBootstrapの各パーツをコンポーネントのように扱うことができるので、オススメです。

🚌 サンプルコード

まずモーダル側のサンプルコードです。

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

export default class SampleModal extends Component {
  render(){
    return <div>
      
        
               show={true}
               onHide={this.props.handleHideModal}
               animation={true}
               bsSize="small">

          
            Modal title
          

          
            One of fine body.........

import React, {Component} from "react";
import SampleModal from "./SampleModal";

class App extends Component {
constructor(props) {
super(props);
this.state = {showModal: false};
this.handleHideModal = this.handleHideModal.bind(this);
this.handleShowModal = this.handleShowModal.bind(this);
}
handleHideModal() {
this.setState({showModal: false})
}
handleShowModal(){
this.setState({showModal: true})
}
render(){
return <div className="row">
<button className="btn btn-default btn-block" onClick={this.handleShowModal}>Open Modalbutton>
{this.state.showModal ? : null}
div>;
}
}

React.render(
<App />,
document.getElementById('container')
);

🎉 参考リンク