handleEditingChange

Author: neerajsingh0101

ep18-edit-todo-part2/app/components/DisplayItem.jsx

@@ -8,7 +8,7 @@ export default class DisplayItem extends React.Component {
   }
 
   handleEditing (event) {
-    this.setState({ editing: true });
+    this.setState({ editing: true, changedText: this.props.todo.title });
   }
 
   handleEditingDone (event) {
@@ -17,6 +17,11 @@ export default class DisplayItem extends React.Component {
     }
   }
 
+  handleEditingChange (event) {
+    var _changedText = event.target.value;
+    this.setState({ changedText: _changedText });
+  }
+
   render () {
     var todo = this.props.todo;
 
@@ -50,8 +55,9 @@ export default class DisplayItem extends React.Component {
 
               <input  type="text"
                       onKeyDown={this.handleEditingDone.bind(this)}
+                      onChange={this.handleEditingChange.bind(this)}
                       style={editStyle}
-                      value={todo.title} />
+                      value={this.state.changedText} />
            </li>
   }