|
@ -6,48 +6,38 @@ var TODO_COMPONENT = "\ |
|
|
/** @jsx React.DOM */\n\ |
|
|
/** @jsx React.DOM */\n\ |
|
|
var TodoList = React.createClass({\n\ |
|
|
var TodoList = React.createClass({\n\ |
|
|
render: function() {\n\ |
|
|
render: function() {\n\ |
|
|
var items = this.props.items.map(function(item) {\n\ |
|
|
var createItem = function(itemText) {\n\ |
|
|
return <li>{item}</li>;\n\ |
|
|
return <li>{itemText}</li>;\n\ |
|
|
});\n\ |
|
|
};\n\ |
|
|
return <ul>{items}</ul>;\n\ |
|
|
return <ul>{this.props.items.map(createItem)}</ul>;\n\ |
|
|
}\n\ |
|
|
}\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\ |
|
|
var TodoApp = React.createClass({\n\ |
|
|
getInitialState: function() {\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\ |
|
|
},\n\ |
|
|
onItemCreate: React.autoBind(function(value) {\n\ |
|
|
|
|
|
this.setState({items: this.state.items.concat([value])});\n\ |
|
|
|
|
|
}),\n\ |
|
|
|
|
|
render: function() {\n\ |
|
|
render: function() {\n\ |
|
|
return (\n\ |
|
|
return (\n\ |
|
|
<div>\n\ |
|
|
<div>\n\ |
|
|
<h3>TODO</h3>\n\ |
|
|
<h3>TODO</h3>\n\ |
|
|
<TodoList items={this.state.items} />\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\ |
|
|
</div>\n\ |
|
|
);\n\ |
|
|
);\n\ |
|
|
}\n\ |
|
|
}\n\ |
|
|
});\n\ |
|
|
});\n\ |
|
|
\n\ |
|
|
|
|
|
React.renderComponent(<TodoApp />, mountNode);\ |
|
|
React.renderComponent(<TodoApp />, mountNode);\ |
|
|
"; |
|
|
"; |
|
|
|
|
|
|
|
|