前提・実現したいこと
ボタンをクリックした際、マウスの下にポップオーバーが開くようにしたいです。
Reactstrapを使用しています。
Bootstrapでの実装方法でも構いませんので、ご教授願いたいです。
サンプルコード
Javascript
1import React, {Component} from 'react' 2import {Container, Row, Popover, PopoverHeader, PopoverBody, Button} from 'reactstrap' 3 4class Example extends Component{ 5constructor(props) { 6 super(props); 7 this.toggle = this.toggle.bind(this); 8 this.state = { 9 popoverOpen: false 10 }; 11 } 12 13 toggle() { 14 this.setState({ 15 popoverOpen: !this.state.popoverOpen 16 }); 17 } 18 19 render(){ 20 return( 21 <Container> 22 <Row className="mt-100"> 23 <Button id="Popover1" onClick={this.toggle}>Launch Popover</Button> //クリックするとボタンの下にPopoverが出る 24 <Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" toggle={this.toggle}> 25 <PopoverHeader>Header</PopoverHeader> 26 <PopoverBody>Body</PopoverBody> 27 </Popover> 28 </Row> 29 </Container> 30 ) 31 } 32} 33 34export default Example
補足情報(FW/ツールのバージョンなど)
"react": 16.3.2
"reactstrap": 6.0.1
あなたの回答
tips
プレビュー