|
@@ -21,6 +21,22 @@ App = React.createClass({
|
|
|
});
|
|
|
},
|
|
|
|
|
|
+ handleSubmit(event) {
|
|
|
+ event.preventDefault();
|
|
|
+ // Meteor._debug('refs', this.refs);
|
|
|
+
|
|
|
+ // Find the text field via the React ref.
|
|
|
+ var text = ReactDOM.findDOMNode(this.refs.textInput).value.trim();
|
|
|
+
|
|
|
+ Tasks.insert({
|
|
|
+ text: text,
|
|
|
+ createdAt: new Date() // Current time
|
|
|
+ });
|
|
|
+
|
|
|
+ // Clear form to allow a new input.
|
|
|
+ ReactDOM.findDOMNode(this.refs.textInput).value = '';
|
|
|
+ },
|
|
|
+
|
|
|
render() {
|
|
|
return (
|
|
|
<div className="container">
|
|
@@ -28,7 +44,8 @@ App = React.createClass({
|
|
|
<h1>Todo list</h1>
|
|
|
|
|
|
{/* These are JSX comments. */}
|
|
|
- <form className="new-task" onsubmit={this.handleSubmit} >
|
|
|
+ {/* Beware: for React, onsubmit is not the same as onSubmit, the former doesn't work */}
|
|
|
+ <form className="new-task" onSubmit={this.handleSubmit} >
|
|
|
<input type="text" ref="textInput" placeholder="Type to add new tasks" />
|
|
|
</form>
|
|
|
</header>
|