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>
