码迷,mamicode.com
首页 > 其他好文 > 详细

React状态的含义和用法

时间:2015-12-17 22:23:54      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:

一、

技术分享

二、代码

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Hello, World</title>
 6 </head>
 7 <body>
 8     <script src="./react-0.13.2/react-0.13.2/build/react.js"></script>
 9     <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
10     <script type="text/jsx">
11         var style = {
12             color: "red",
13             border: "1px #000 solid",
14         };
15         var HelloWorld = React.createClass({
16             render: function () { 
17                 return <p>Hello, {this.props.name}</p>;
18             },
19         });
20         var HelloUniverse = React.createClass({
21             getInitialState: function () {
22                 return {
23                     name: Tim,
24                 };
25             },
26             handleChange: function (event) {                
27                 this.setState({name: event.target.value});
28             },
29             render: function () {
30                 return <div>
31                 <HelloWorld name={this.state.name}></HelloWorld>
32                 <br/>
33                 <input type="text" onChange={this.handleChange} />
34                 </div>
35             },
36         });
37         React.render(<div style={style}><HelloUniverse></HelloUniverse></div>, document.body);
38     </script>
39 </body>
40 </html>

 

React状态的含义和用法

标签:

原文地址:http://www.cnblogs.com/shamgod/p/5055305.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!