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 <script type="text/jsx"> 16 var TestClickComponent = React.createClass({ 17 handleClick: function (event) { 18 var tipE = ReactDOM.findDOMNode(this.refs.tip) 19 if(tipE.style.display === 'none') { 20 tipE.style.display = 'inline' 21 } else { 22 tipE.style.display = 'none' 23 } 24 <!-- 阻止浏览的冒泡事件和默认行为 --> 25 event.stopPropagation() 26 event.preventDefault() 27 }, 28 render: function () { 29 return ( 30 <div> 31 <button onClick={this.handleClick}>显示|隐藏</button><span ref="tip">测试点击</span> 32 </div> 33 ) 34 } 35 }) 36 var TestInputComponent = React.createClass({ 37 <!-- getInitialState使用用来初始化state的状态的--> 38 getInitialState: function () { 39 return { 40 inputContent: '' 41 } 42 }, 43 changeHandler: function(event) { 44 <!-- this.setState是用来修改state的状态 --> 45 this.setState({ 46 inputContent: event.target.value 47 }) 48 }, 49 render: function () { 50 return( 51 <div> 52 <!-- 这里是通过驼峰试的命名来绑定事件，例如onClick，onChange等等，他们的的值是一个js表达式--> 53 <input type="text" onChange={this.changeHandler}/><span>{this.state.inputContent}</span> 54 </div> 55 ) 56 } 57 }) 58 ReactDOM.render( 59 <div> 60 <TestClickComponent/> 61 <br/> 62 <br/> 63 <TestInputComponent/> 64 </div>,document.getElementById('container')); 65 </script> 66 </body> 67 </html>