-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtodo_app.html
51 lines (42 loc) · 1.27 KB
/
todo_app.html
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
<html>
<head>
<title>Todo App</title>
<script src="react.min.js"></script>
<script src="reactor.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/javascript">
var TodoList = Reactor.createClass({
jml: function() {
var createItem = function(itemText, index) {
return ["li",{key:index + itemText}, itemText];
};
return ["ul"].concat(this.props.items.map(createItem));
}
});
var TodoApp = Reactor.createClass({
getInitialState: function() {
return {items: [], text: ''};
},
onChange: function(e) {
this.setState({text: e.target.value});
},
handleSubmit: function(e) {
e.preventDefault();
var nextItems = this.state.items.concat([this.state.text]);
var nextText = '';
this.setState({items: nextItems, text: nextText});
},
jml: function() {
return ["div", ["h3","TODO"],
[TodoList, {items: this.state.items}],
["form",{onSubmit: this.handleSubmit},
["input", {onChange: this.onChange, value: this.state.text}],
["button", "Add #", this.state.items.length+1]]];
}
});
Reactor.render([TodoApp], document.getElementById('content'));
</script>
</body>
</html>