The library for web and native user interfaces.
Make todo example shorter and not rely on the DOM.
jordow committed
Jun 5, 2013 at 23:45 UTC
81f3a5c6cd354996f435cd21c7b973c45146091e
2 files changed
+23
-32
docs/_js/examples/todo.js
+18
-28
@@ -6,48 +6,38 @@ var TODO_COMPONENT = "\
6
/** @jsx React.DOM */\n\
7
var TodoList = React.createClass({\n\
8
render: function() {\n\
9
- var items = this.props.items.map(function(item) {\n\
10
- return <li>{item}</li>;\n\
11
- });\n\
12
- return <ul>{items}</ul>;\n\
9
+ var createItem = function(itemText) {\n\
10
+ return <li>{itemText}</li>;\n\
11
+ };\n\
12
+ return <ul>{this.props.items.map(createItem)}</ul>;\n\
13
}\n\
14
});\n\
15
-\n\
16
-var TodoCreate = React.createClass({\n\
17
- handleSubmit: React.autoBind(function() {\n\
18
- var textInput = this.refs.textInput.getDOMNode();\n\
19
- this.props.onCreate(textInput.value);\n\
20
- textInput.value = '';\n\
21
- return false;\n\
22
- }),\n\
23
- render: function() {\n\
24
- return (\n\
25
- <form onSubmit={this.handleSubmit}>\n\
26
- <input type=\"text\" ref=\"textInput\" />\n\
27
- <button>Add</button>\n\
28
- </form>\n\
29
- );\n\
30
- }\n\
31
-});\n\
32
-\n\
15
var TodoApp = React.createClass({\n\
16
getInitialState: function() {\n\
35
- return {items: []};\n\
17
+ return {items: [], text: ''};\n\
18
+ },\n\
19
+ onKey: function(e) {\n\
20
+ this.setState({text: e.target.value});\n\
21
+ },\n\
22
+ handleSubmit: function(e) {\n\
23
+ e.preventDefault();\n\
24
+ var nextItems = this.state.items.concat([this.state.text]);\n\
25
+ var nextText = '';\n\
26
+ this.setState({items: nextItems, text: nextText});\n\
27
},\n\
37
- onItemCreate: React.autoBind(function(value) {\n\
38
- this.setState({items: this.state.items.concat([value])});\n\
39
- }),\n\
28
render: function() {\n\
29
return (\n\
30
<div>\n\
31
<h3>TODO</h3>\n\
32
<TodoList items={this.state.items} />\n\
45
- <TodoCreate onCreate={this.onItemCreate} />\n\
33
+ <form onSubmit={this.handleSubmit.bind(this)}>\n\
34
+ <input onKeyUp={this.onKey.bind(this)} value={this.state.text} />\n\
35
+ <button>{'Add #' + (this.state.items.length + 1)}</button>\n\
36
+ </form>\n\
37
</div>\n\
38
);\n\
39
}\n\
40
});\n\
50
-\n\
41
React.renderComponent(<TodoApp />, mountNode);\
42
";
43
docs/index.md
+5
-4
@@ -56,10 +56,11 @@ id: home
56
<div class="example">
57
<h3>An Application</h3>
58
<p>
59
- Using properties and state, we can put together a small Todo
60
- application. React provides an interface to the DOM via `refs`. Although
61
- event handlers appear to be rendered inline, they will be
62
- collected and implemented using event delegation.
59
+ Using `props` and `state`, we can put together a small Todo application.
60
+ This example uses `state` to track the current list of items as well as
61
+ the text that the user has entered. Although event handlers appear to be
62
+ rendered inline, they will be collected and implemented using event
63
+ delegation.
64
</p>
65
<div id="todoExample"></div>
66
</div>