###前提・実現したいこと
以下の画像の通り、PopoverがModal上に表示されるので、そうでなくModalがPopover上に表示できるようにしたい。もしくはModalが表示されるときにPopoverを消したい。
1.「ポップオーバーボタン」を押下
2.「モーダル表示ボタン」を押下
3.Modal上にPopoverが表示される
###該当のソースコード
Typescript
1///<reference path="../../typings/index.d.ts" /> 2 3import * as React from "react"; 4import { Link } from "react-router"; 5import * as ReactDOM from "react-dom"; 6import { Button, OverlayTrigger, Popover, Modal } from "react-bootstrap"; 7 8 9export interface TempNotificationListProps { title: string } 10 11interface S { 12 showModal?: boolean; 13} 14 15export class TempNotificationList extends React.Component<TempNotificationListProps, S> { 16 constructor(props:TempNotificationListProps) { 17 super(props); 18 } 19 20 state: S = { 21 showModal: false, 22 } 23 24 render() { 25 26 const popoverBottom = ( 27 <Popover id="popover-positioned-scrolling-bottom" ref='popover'> 28 <Button className="btn-link btn-ghost" 29 onClick={() => { this.setState({ showModal: true}) }}> 30 モーダル表示ボタン 31 </Button> 32 </Popover> 33 ); 34 35 return ( 36 <div className=""> 37 <Modal show={this.state.showModal} bsSize="lg"> 38 <Modal.Footer> 39 <Button bsStyle="danger" bsSize="small" closeOnClick="false" onClick={() => this.setState({ showModal: false})}>閉じる</Button> 40 </Modal.Footer> 41 </Modal> 42 <OverlayTrigger trigger="click" rootClose placement="bottom" ref="myPopover" overlay={popoverBottom}> 43 <Button>ポップオーバーボタン</Button> 44 </OverlayTrigger> 45 </div> 46 ); 47 48 49 } 50} 51
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 react_bootstrap_1 = require("react-bootstrap"); 9var TempNotificationList = (function (_super) { 10 __extends(TempNotificationList, _super); 11 function TempNotificationList(props) { 12 _super.call(this, props); 13 this.state = { 14 showModal: false, 15 }; 16 } 17 TempNotificationList.prototype.render = function () { 18 var _this = this; 19 var popoverBottom = (React.createElement(react_bootstrap_1.Popover, {id: "popover-positioned-scrolling-bottom", ref: 'popover'}, 20 React.createElement(react_bootstrap_1.Button, {className: "btn-link btn-ghost", onClick: function () { _this.setState({ showModal: true }); }}, "モーダル表示ボタン") 21 )); 22 return (React.createElement("div", {className: ""}, 23 React.createElement(react_bootstrap_1.Modal, {show: this.state.showModal, bsSize: "lg"}, 24 React.createElement(react_bootstrap_1.Modal.Footer, null, 25 React.createElement(react_bootstrap_1.Button, {bsStyle: "danger", bsSize: "small", closeOnClick: "false", onClick: function () { return _this.setState({ showModal: false }); }}, "閉じる") 26 ) 27 ), 28 React.createElement(react_bootstrap_1.OverlayTrigger, {trigger: "click", rootClose: true, placement: "bottom", ref: "myPopover", overlay: popoverBottom}, 29 React.createElement(react_bootstrap_1.Button, null, "ポップオーバーボタン") 30 ))); 31 }; 32 return TempNotificationList; 33}(React.Component)); 34exports.TempNotificationList = TempNotificationList; 35//# sourceMappingURL=TempNotificationList.js.map
###補足情報(言語/FW/ツール等のバージョンなど)
Typescript
React.js
react-bootstrap
keystone.js
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。