2020-6-26 React的学习

直接看代码和注释

react的事件比较麻烦
还有就是弄css的style感觉很繁琐
希望以后的学习让这个会好一点

优点：组件封装之后使用比较方便而且逻辑上更好理解和常用

　　类似于我现在谁用的swt和swing组件只不过更加的困难一点因为智能提示更好

　　如果有bug 修改起来比较麻烦

ps:react 的注释和js的不一样

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>父子关系</title>
 6 </head>
 7 <body>
 8     <script src="../react-0.13.2/build/react.js"></script>
 9     <script src="../react-0.13.2/build/JSXTransformer.js"></script>
10     <script type="text/jsx">
11      /*  React.createClass创建选择性别一个组件
12             */
13         var GenderSelect = React.createClass({
14            /*  渲染这个组件 这个组件=return值、
15             * this.props.handleSelect用来调用上层的handleSelect事件方法
16             *this.props为使用自己的属性 调用此组件的实话 handleSelec函数为其一个属性
17             */
18            render: function() {
19                 return <select onChange={this.props.handleSelect}>
20                 <option value="0">男</option>
21                 <option value="1">女</option>
22                 </select>
23             }
24         })
25          /*  这个组件是父组件 
26             */
27         var SignupForm = React.createClass({
28             /*  这个初始化阶段的方法  return的状态 State
29             */
30             getInitialState: function() {
31                 return {
32                     name: '',
33                     password: '',
34                     gender: '',
35                 }
36             },
37             /*  这是一个自定义事件 参数俩个 
38              * event.target=触发的组件 
39              *this 在触发的时候可以指定
40             */
41             handleChange: function(name, event) {
42                 var newState = {}
43                 newState[name] = event.target.value
44                 this.setState(newState)
45             },
46              /*  这是一个自定义事件 
47              * 将this的key:gender 设为一个值
48             */
49             handleSelect: function(event) {
50                 this.setState({gender: event.target.value})
51             },
52             render: function() {
53                 console.log(this.state)
54                
55                 return <form>
56                  触发自己定义的 handleChange事件
57                      this=组件本身
58                     
59                 <input type="text" placeholder="请输入用户名" onChange={this.handleChange.bind(this, 'name')} />
60                 <input type="password" placeholder="请输入密码" onChange={this.handleChange.bind(this, 'password')} />
61                        调用自定义的性别选择组件 handleSelect事件为他的一个函数
62                <GenderSelect handleSelect={this.handleSelect}></GenderSelect>
63                 </form>
64             }
65         })
66         /*
67          *将父组件渲染到body中
68          */
69         React.render(<SignupForm></SignupForm>, document.body);
70     </script>
71 </body>
72 </html>

View Code

2020-6-26 React的学习

猜你喜欢