react点击按钮，记录点击次数

最新推荐文章于 2024-08-08 10:57:29 发布

gxf_style

最新推荐文章于 2024-08-08 10:57:29 发布

阅读量2.1k

点赞数

分类专栏：前端框架，类库文章标签： react

前端框架，类库专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、问题背景

点击按钮，记录点击次数

2、实现源码

[html]view plaincopy 
   
print?
 <!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>  