reactjs - reactstrap ButtonDropdown not working -
i have no idea why buttondropdown isn't working. try learn react, not find failure in code:
import react 'react'; import {render} 'react-dom'; //import 'bootstrap/dist/css/bootstrap.css'; //also when try import bootstrap isn`t working import { buttondropdown, dropdowntoggle, dropdownmenu, dropdownitem } 'reactstrap'; class app extends react.component { constructor(props) { super(props); this.toggle_dropdownrunde = this.toggle_dropdownrunde.bind(this); this.changetext_dropdownrunde = this.changetext_dropdownrunde.bind(this); this.state = { dropdownrunde_open: false, dropdownrunde_text: "-- wait response --", }; } toggle_dropdownrunde() { this.setstate({ dropdownrunde_open: !this.state.dropdownrunde_open }); } changetext_dropdownrunde() { this.setstate({ dropdownrunde_text: "hello different" }); } render () { return ( <div> <buttondropdown isopen={this.state.dropdownrunde_open} toggle={this.toggle_dropdownrunde} > <dropdowntoggle caret> { this.state.dropdownrunde_text } </dropdowntoggle> <dropdownmenu> <dropdownitem value="round 1" onclick={this.changetext_dropdownrunde}>round 1</dropdownitem> <dropdownitem value="round 2" onclick={this.changetext_dropdownrunde}>round 2</dropdownitem> </dropdownmenu> </buttondropdown> </div> ); } } render(( <app /> ), document.getelementbyid('app'));
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/y6pd6fv/vv2hjna6t+vslu6fwyxjcftcephbnj0lyafsxtsjbbfadjzaleqsn6m" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <body> <div id="app" /> <script src="bundle.js"></script> </body>
sorry, didn`t running on jsfiddle (shameonme)
the problem buttondropdown shown correctly not expand. when click on button nothing changes. doing wrong? thank you
package.json (if needed):
"babel-core": "^6.25.0", "babel-loader": "^7.1.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "bootstrap": "^4.0.0-alpha.6", "node-rest-client": "^3.1.0", "react": "^15.6.1", "react-addons-css-transition-group": "^15.6.0", "react-addons-transition-group": "^15.6.0", "react-bootstrap-table": "^4.0.1", "react-burger-menu": "^2.1.4", "react-dom": "^15.6.1", "react-router-dom": "^4.1.2", "reactstrap": "^4.8.0", "webpack": "^3.4.1"
Comments
Post a Comment