React click toggle

来源:互联网 发布:2014十大网络用语 编辑:程序博客网 时间:2024/06/01 22:14
<html>  <head>      <title>Document</title>      <script src="../react.js"></script>      <script src="../react-dom.js"></script>      <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>  </head>  <body>    <div id="demo"></div>    <script type="text/babel">       class  Toggle extends React.Component {         constructor(props) {           super(props)           this.state = {isToggleOn: true}           this.handleClick = this.handleClick.bind(this)         }         handleClick() {           this.setState(prevState => ({             isToggleOn: !prevState.isToggleOn           }))         }         render() {           return (             <button onClick={this.handleClick}>               {this.state.isToggleOn ? 'ON' : 'OFF'}             </button>           )         }       }       const element = <Toggle />       ReactDOM.render(         element,         document.getElementById('demo')       )    </script>  </body></html>
原创粉丝点击