react入门----事件监听
Posted Ethan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react入门----事件监听相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <!-- react核心库 --> 7 <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> 8 <!-- 提供与dom相关的功能 --> 9 <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> 10 <!-- 将es6代码转换为es5语法格式 --> 11 <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> 12 </head> 13 <body> 14 <div id="container"></div> 15 <!-- react组件的声明周期 --> 16 <!-- 1.Mounted ReactComponents被render函数解析生成对应的DOM节点，并被插入浏览器的DOM结构的一个过程--> 17 <!-- 2.Updata一个mounted的ReactComponents被重新render的过程 这里并不是重新渲染DOM， ReactComponents会比较当前state和最近的一次的state进行对比，只有state确实发生了改变，并影响dom结构，react才会去改变对应dom结构--> 18 <!-- 3.Unmounted 一个mounted的ReactComponents对应的DOM节点被从DOM结构中移除的这样一个过程--> 19 <!-- 每一个状态React都封装了对应的hook函数，汉语翻译为钩子函数 --> 20 <!-- hook中断系统的节点 --> 21 <!-- 每一个hook函数都有对应的两个状态，将要和已经也就是will和did --> 22 <script type="text/jsx"> 23 var TestClickComponent = React.createClass({ 24 handClick: function (event) { 25 event 26 } 27 render: function () { 28 return ( 29 <div> 30 <button onClick=this.handleClick>显示|隐藏</button><span>测试点击</span> 31 </div> 32 ) 33 } 34 }) 35 var TestInputComponent = React.createClass({ 36 getInitialState: function () { 37 return { 38 inputContent: ‘‘ 39 } 40 }, 41 render: function () { 42 return( 43 <div> 44 <input type="text"/><span>{this.state.inputContent}</span> 45 </div> 46 ) 47 } 48 }) 49 ReactDOM.render( 50 <div> 51 <TestClickComponent/> 52 <br/> 53 <br/> 54 <TestInputComponent/> 55 </div>,document.getElementById(‘container‘)); 56 </script> 57 </body> 58 </html>
以上是关于react入门----事件监听的主要内容，如果未能解决你的问题，请参考以下文章