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首字母大写
