Make todo example shorter and not rely on the DOM.
This commit is contained in:
parent
31cdb4c8a7
commit
81f3a5c6cd
|
@ -6,48 +6,38 @@ var TODO_COMPONENT = "\
|
|||
/** @jsx React.DOM */\n\
|
||||
var TodoList = React.createClass({\n\
|
||||
render: function() {\n\
|
||||
var items = this.props.items.map(function(item) {\n\
|
||||
return <li>{item}</li>;\n\
|
||||
});\n\
|
||||
return <ul>{items}</ul>;\n\
|
||||
var createItem = function(itemText) {\n\
|
||||
return <li>{itemText}</li>;\n\
|
||||
};\n\
|
||||
return <ul>{this.props.items.map(createItem)}</ul>;\n\
|
||||
}\n\
|
||||
});\n\
|
||||
\n\
|
||||
var TodoCreate = React.createClass({\n\
|
||||
handleSubmit: React.autoBind(function() {\n\
|
||||
var textInput = this.refs.textInput.getDOMNode();\n\
|
||||
this.props.onCreate(textInput.value);\n\
|
||||
textInput.value = '';\n\
|
||||
return false;\n\
|
||||
}),\n\
|
||||
render: function() {\n\
|
||||
return (\n\
|
||||
<form onSubmit={this.handleSubmit}>\n\
|
||||
<input type=\"text\" ref=\"textInput\" />\n\
|
||||
<button>Add</button>\n\
|
||||
</form>\n\
|
||||
);\n\
|
||||
}\n\
|
||||
});\n\
|
||||
\n\
|
||||
var TodoApp = React.createClass({\n\
|
||||
getInitialState: function() {\n\
|
||||
return {items: []};\n\
|
||||
return {items: [], text: ''};\n\
|
||||
},\n\
|
||||
onKey: function(e) {\n\
|
||||
this.setState({text: e.target.value});\n\
|
||||
},\n\
|
||||
handleSubmit: function(e) {\n\
|
||||
e.preventDefault();\n\
|
||||
var nextItems = this.state.items.concat([this.state.text]);\n\
|
||||
var nextText = '';\n\
|
||||
this.setState({items: nextItems, text: nextText});\n\
|
||||
},\n\
|
||||
onItemCreate: React.autoBind(function(value) {\n\
|
||||
this.setState({items: this.state.items.concat([value])});\n\
|
||||
}),\n\
|
||||
render: function() {\n\
|
||||
return (\n\
|
||||
<div>\n\
|
||||
<h3>TODO</h3>\n\
|
||||
<TodoList items={this.state.items} />\n\
|
||||
<TodoCreate onCreate={this.onItemCreate} />\n\
|
||||
<form onSubmit={this.handleSubmit.bind(this)}>\n\
|
||||
<input onKeyUp={this.onKey.bind(this)} value={this.state.text} />\n\
|
||||
<button>{'Add #' + (this.state.items.length + 1)}</button>\n\
|
||||
</form>\n\
|
||||
</div>\n\
|
||||
);\n\
|
||||
}\n\
|
||||
});\n\
|
||||
\n\
|
||||
React.renderComponent(<TodoApp />, mountNode);\
|
||||
";
|
||||
|
||||
|
|
|
@ -56,10 +56,11 @@ id: home
|
|||
<div class="example">
|
||||
<h3>An Application</h3>
|
||||
<p>
|
||||
Using properties and state, we can put together a small Todo
|
||||
application. React provides an interface to the DOM via `refs`. Although
|
||||
event handlers appear to be rendered inline, they will be
|
||||
collected and implemented using event delegation.
|
||||
Using `props` and `state`, we can put together a small Todo application.
|
||||
This example uses `state` to track the current list of items as well as
|
||||
the text that the user has entered. Although event handlers appear to be
|
||||
rendered inline, they will be collected and implemented using event
|
||||
delegation.
|
||||
</p>
|
||||
<div id="todoExample"></div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue