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')
);

🎉 参考リンク

🖥 VULTRおすすめ

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

📚 おすすめの書籍