my_reactjs/index.html at master · lingximu/my_reactjs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>reactjs练习</title>
	<script src="./resource/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="./MyReact.js"></script>
</head>
<body>
	<div id="container"></div>
	<script type="text/javascript">
	var TodoList = React.createClass({
		  getInitialState: function() {
		    return {items: ['one','two']};
		  },
		  add:function(){
		    var nextItems = this.state.items.concat([this.state.text]);
		    this.setState({items: nextItems, text: ''});
		  },
		  onChange: function(e) {
		    this.setState({text: e.target.value});
		  },
		  render: function() {
		    var createItem = function(itemText) {
		      return React.createElement("div", null, itemText);
		    };

		    var lists = this.state.items.map(createItem);
		    var input = React.createElement("input", {onKeyup: this.onChange.bind(this),value: this.state.text,autofocus:"autofocus"});
		    var button = React.createElement("p", {onClick: this.add.bind(this)}, 'Add #' + (this.state.items.length + 1))
		    var children = lists.concat([input,button])

		    return React.createElement("div", null,children);
		  }
		});


		React.render(React.createElement(TodoList), document.getElementById("container"));

/*
	//调试setState时所用
 	var CustomComponent = React.createClass({
		getInitialState:function(){
			return {oneState:'statestate: '}
		},
		componentWillMount:function(){
			console.log('将要渲染...')
		},
		componentDidMount:function(){
			console.log('渲染完成！！')
		},
		changeOneState:function(){
			this.setState({oneState:'STATESTAET'})
		},
		render:function(){
			return React.createElement("div",{onClick:this.changeOneState.bind(this)},this.state.oneState,"to div prop",this.props.oneProp)
		}

	})
	var element = React.createElement(CustomComponent,{
		oneProp:'proppropprop'
	},'click')
	React.render(element,document.getElementById('container'))
*/

/*
 *这是运用createElement渲染浏览器本身支持的元素
 *


	function sayHello(){
			alert('hello')
		}
		var element = React.createElement('div',{
			id:'test'
			,onClick:sayHello
		},'click')
		React.render(element,document.getElementById('container'))*/
	</script>
</body>
</html>