Permalink
Browse files

Step 4 of TODO App with React tutorial - use a form to add TODO items

  • Loading branch information...
itamaro committed Nov 28, 2015
1 parent a8f2845 commit 898c290dfc92e471c918162df3461849c28c78ed
Showing with 23 additions and 1 deletion.
  1. +23 −1 App.jsx
24 App.jsx
@@ -7,7 +7,7 @@ App = React.createClass({
// Loads items from the Tasks collection and puts them on this.data.tasks
getMeteorData() {
return {
tasks: Tasks.find({}).fetch()
tasks: Tasks.find({}, {sort: {createdAt: -1}}).fetch()
}
},

@@ -18,11 +18,33 @@ App = React.createClass({
});
},

handleSubmit(event) {
event.preventDefault();

// Find the text field via the React ref
var text = React.findDOMNode(this.refs.textInput).value.trim();

Tasks.insert({
text: text,
createdAt: new Date() // current time
});

// Clear form
React.findDOMNode(this.refs.textInput).value = "";
},

render() {
return (
<div className="container">
<header>
<h1>Todo List</h1>

<form className="new-task" onSubmit={this.handleSubmit} >
<input
type="text"
ref="textInput"
placeholder="Type to add new tasks" />
</form>
</header>

<ul>

0 comments on commit 898c290

Please sign in to comment.