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>
<div>
<Modal className="modal-container"
show={true}
onHide={this.props.handleHideModal}
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.props.handleHideModal}>Close</Button>
<Button bsStyle="primary">Save changes</Button>
</Modal.Footer>
</Modal>
</div>
</div>;
}
}

続いて、モーダルの呼び出し側です。

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 Modal</button>
{this.state.showModal ? <SampleModal handleHideModal={this.handleHideModal}/> : null}
</div>;
}
}
React.render(
<App />,
document.getElementById('container')
);

😼 参考リンク

🖥 VULTRおすすめ

VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります!

📚 おすすめの書籍