モーダルが表示されない

###前提・実現したいこと
Bootstrapでボタンをクリックするとモーダルがポップアップするサイトを作っています。
ボタンを押すと一瞬だけアクションが起きるのですが、すぐに元の画面に戻ってしまいます。
アドバイスや同じような挙動が起きたなど些細なことでも心当たりがあれば、ご助言をお願いします。

[ボタン(この写真を削除)を押す前]

[ボタンを押した瞬間(表示されない)]

[ボタン押した後]

###該当のソースコード
React, TypeScriptここに言語を入力
///<reference path="../../typings/index.d.ts" />

import * as React from "react";
import { Link } from "react-router";
import * as leaflet from "leaflet";
import * as ReactDOM from "react-dom";
import { Map, TileLayer, Popup, Marker } from "react-leaflet";

export interface RecordMapProps {lat:number, lon:number}

export class RecordMap extends React.Component<RecordMapProps, {}> {

render() {
	const position = [37.487509, 139.9303462];
	return (
		<div id="recordMap" className="recordMap-content">

				<div className="modal fade" id="sampleModal" >
				  <div className="modal-dialog">
				    <div className="modal-content">
				      <div className="modal-header">
				      </div>
				      <div className="modal-body">
				      </div>
				      <div className="modal-footer">
				      </div>
				    </div>
				  </div>
				</div>


			<Map center={position} zoom={16}>
				<TileLayer
					url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
					attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'/>
				<Marker position={position}>
					<Popup>
							<span><img src="/images/120x100.png" className="img-fix"></img><br/>
								<button type="button" className="btn btn-danger btn-sm" data-toggle="modal" data-target="#sampleModal" data-clickbotton="ボタン">
									この写真を削除
								</button>
							</span>
					</Popup>
				</Marker>
			</Map>

		</div>

	);
}

}

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>alq-keystone</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <link href="/styles/site.css" rel="stylesheet">
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css">
  </head>
  <body>
    <div id="header">
    </div>
    <div id="body" class="body clearfix">
      <div class="body__container container">
        <div id="react-stage" class="clearfix">
          <hr>
          <!--
          if user && user.canAccessKeystone
          	p
          		a(href='/keystone').btn.btn-lg.btn-primary Open the Admin UI
          else
          	p We have created a default Admin user for you with the email <strong>admin@example.com</strong> and the password <strong>admin</strong>.
          	p
          		a(href='/keystone/signin', style='margin-right: 10px').btn.btn-lg.btn-primary Sign in
          		|  to use the Admin UI.
          -->
        </div>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.min.js"></script>
    <script src="/js/jquery/jquery-1.11.3.min.js"></script>
    <script src="/js/bootstrap/bootstrap-3.3.5.min.js"></script>
    <script src="/js/flat-ui-pro/flat-ui-pro.min.js"></script>
    <script type="text/javascript" src="/js/geojson.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
  </body>
  <script src="./dist/bundle.js"></script>
</html>

JavaScript
1"use strict";
2var __extends = (this && this.__extends) || function (d, b) {
3    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
4    function __() { this.constructor = d; }
5    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
6};
7var React = require("react");
8var RecordMap_1 = require("./RecordMap");
9var ViewRecordMap = (function (_super) {
10    __extends(ViewRecordMap, _super);
11    function ViewRecordMap() {
12        _super.apply(this, arguments);
13    }
14    ViewRecordMap.prototype.render = function () {
15        var position = { lat: 37.4878198, lon: 139.9296657 };
16        return (React.createElement(RecordMap_1.RecordMap, {lat: position.lat, lon: position.lon}));
17    };
18    return ViewRecordMap;
19}(React.Component));
20exports.ViewRecordMap = ViewRecordMap;
21//# sourceMappingURL=ViewRecordMap.js.map

###補足情報(言語/FW/ツール等のバージョンなど)
[言語]
JavaScript
TypeScript
[フレームワーク]
keystone : 0.3.19
[ライブラリ]
Bootstrap
Flat-Ui
react : 15.30
react-dom : 15.3
react-leaflet : 0.12.3
react-router : 2.7.0

gin

2016/10/24 03:22

Bootstrapの問題ではなくJSの問題だと思うので、[javascript][typescript][React]などのタグを追加して見てもらった方がいいと思います。あとなるべく回答者が気軽に検証しやすいようhtmlやjavascriptにコンパイルした状態で掲載するといいと思います。

aizone

2016/10/24 08:28

迅速なご助言ありがとうございます。ご指摘された通り修正いたしました。

行動規範の内容に同意します

回答1件

自己解決

"react-bootstrap"というライブラリを導入して解決しました。
以下はそのソースコードです。
///<reference path="../../typings/index.d.ts" />

import * as React from "react";
import { Link, Redirect, IndexRedirect } from "react-router";
import * as leaflet from "leaflet";
import * as ReactDOM from "react-dom";
import { Map, TileLayer, Popup, Marker } from "react-leaflet";
import { Button, Modal, ButtonToolbar } from "react-bootstrap";

export interface RecordMapProps {lat:number, lon:number}

interface S {
showModal?: boolean;
closeOnClick? : boolean;
}

export class RecordMap extends React.Component<RecordMapProps, S> {
constructor(props: RecordMapProps) {
super(props);
}

state: S = {
showModal: false,
closeOnClick : true
}

render() {
	var items: any = [];
	var marker = [
		{ id: 0, lat: 37.488509, lon: 139.9302962 },
		{ id: 0, lat: 37.486419, lon: 139.9301372 },
		{ id: 0, lat: 37.485329, lon: 139.9300282 },
		{ id: 0, lat: 37.483239, lon: 139.9308192 },
		{ id: 0, lat: 37.484149, lon: 139.9309802 },
	];

	for(var i = 0, len = marker.length; i < len; i++) {
		var temp = [marker[i].lat, marker[i].lon];
		items.push(
			<Marker position={temp}>
				<Popup>
					<span>
					<img src="images/120*100.png" className="" />
						<br/>
						<Button className="fix-botunn" bsStyle="danger" bsSize="xsmall"
						onClick={() => {this.setState({ showModal: true})}}>
							この写真を削除
						</Button>
					</span>
				</Popup>
			</Marker>
		);
	}


	const position = [37.487509, 139.9303462];
	return (
		<div id="recordMap" className="recordMap-content">
			<Map center={position} zoom={16} className="recordMap-height">
				<TileLayer
					url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
					attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'/>
				<Marker position={position}>
					<Popup>
						<span>
							<img src="images/120*100.png" className="" />
							<br/>
							<Button className="fix-botunn" bsStyle="danger" bsSize="xsmall"
							onClick={() => {this.setState({ showModal: true})}}>
								この写真を削除
							</Button>
						</span>
					</Popup>
				</Marker>
				{items}
			</Map>
			<Modal show={this.state.showModal}>
				<Modal.Header>
					<Modal.Title>ヘッダー</Modal.Title>
				</Modal.Header>
				<Modal.Body>
				<span>
					写真を削除しますか？
				</span>
				</Modal.Body>
				<Modal.Footer>
					<Button bsSize="small" className="button-float" onClick={() => this.setState({ showModal: false})}>閉じる</Button>
					<Button bsStyle="danger" bsSize="small" closeOnClick="false" onClick={() => this.setState({ showModal: false})}>削除する</Button>
				</Modal.Footer>
			</Modal>

		</div>

	);
}

}

投稿2016/10/31 08:00

aizone

総合スコア12