Merge pull request #1481 from tastejs/react/controlled-input-component

React: Remove direct DOM manipulation

examples/react/js/app.jsx

@@ -20,7 +20,8 @@ var app = app || {};
 		getInitialState: function () {
 			return {
 				nowShowing: app.ALL_TODOS,
-				editing: null
+				editing: null,
+				newTodo: ''
 			};
 		},
 
@@ -34,6 +35,10 @@ var app = app || {};
 			router.init('/');
 		},
 
+		handleChange: function (event) {
+			this.setState({newTodo: event.target.value});
+		},
+
 		handleNewTodoKeyDown: function (event) {
 			if (event.keyCode !== ENTER_KEY) {
 				return;
@@ -41,11 +46,11 @@ var app = app || {};
 
 			event.preventDefault();
 
-			var val = React.findDOMNode(this.refs.newField).value.trim();
+			var val = this.state.newTodo.trim();
 
 			if (val) {
 				this.props.model.addTodo(val);
-				React.findDOMNode(this.refs.newField).value = '';
+				this.setState({newTodo: ''});
 			}
 		},
 
@@ -147,10 +152,11 @@ var app = app || {};
 					<header className="header">
 						<h1>todos</h1>
 						<input
-							ref="newField"
 							className="new-todo"
 							placeholder="What needs to be done?"
+							value={this.state.newTodo}
 							onKeyDown={this.handleNewTodoKeyDown}
+							onChange={this.handleChange}
 							autoFocus={true}
 						/>
 					</header>