1、问题背景
点击按钮,记录点击次数
2、实现源码
<!DOCTYPE html> <html> <head> <Meta charset="UTF-8"> <title>React记录按钮点击次数</title> <link rel="stylesheet" href="../css/base.css" /> <script type="text/javascript" src="../js/react.js" ></script> <script type="text/javascript" src="../js/react-dom.js" ></script> <script type="text/javascript" src="../js/browser.min.js" ></script> <script type="text/babel"> var BtnCounter = React.createClass({ getInitialState: function () { return { count: 0 }; },handlerClick: function () { this.setState({ count: this.state.count + 1,}); },render: function () { return ( <button onClick={this.handlerClick}> 点击: {this.state.count} </button> ); } }); ReactDOM.render( <BtnCounter />,document.getElementById("divContainer") ); </script> </head> <body> <div id="divContainer" style="cursor: pointer;"> 点击我! </div> </body> </html>
3、实现结果
4、注意事项
(1)编写js中的type是"text/babel"
(2)函数BtnCounter首字母大写