Listing 16: adding comments - controlled components.

public/scripts/tutorial.js

@@ -33,12 +33,34 @@ let CommentList = React.createClass({
 });
 
 let CommentForm = React.createClass({
+  getInitialState: function () {
+    return {
+      author: "",
+      text: ""
+    };
+  },
+  handleAuthorChange: function (e) {
+    this.setState({ author: e.target.value });
+  },
+  handleTextChange: function (e) {
+    this.setState({ text: e.target.value });
+  },
   render: function () {
     return (
       <div className="commentForm">
         <form className="commentForm">
-          <input type="text" placeholder="Your name" />
-          <input type="text" placeholder="Say something..." />
+          <input
+            type="text"
+            placeholder="Your name"
+            value={this.state.author}
+            onChange={this.handleAuthorChange}
+          />
+          <input
+            type="text"
+            placeholder="Say something..."
+            value={this.state.text}
+            onChange={this.handleTextChange}
+          />
           <input type="submit" value="Post" />
         </form>
       </div>