Address code review

shakacode · Jan 24, 2016 · 3566a4f · 3566a4f
1 parent 5276607
commit 3566a4f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 11 deletions.
diff --git a/spec/dummy/client/app/components/HelloWorld.jsx b/spec/dummy/client/app/components/HelloWorld.jsx
@@ -1,5 +1,4 @@
 import React, { PropTypes } from 'react';
-import ReactDOM from 'react-dom';
 
 // Super simple example of the simplest possible React component
 class HelloWorld extends React.Component {
@@ -18,11 +17,15 @@ class HelloWorld extends React.Component {
     this.state = props.helloWorldData;
   }
 
-  _handleChange() {
-    const name = ReactDOM.findDOMNode(this.refs.name).value;
+  handleChange() {
+    const name =  this.nameDomRef.name;
     this.setState({ name });
   }
 
+  setNameDomRef(nameDomNode) {
+    this.nameDomRef = nameDomNode;
+  }
+
   render() {
     console.log('HelloWorld demonstrating a call to console.log in '
       + 'spec/dummy/client/app/components/HelloWorld.jsx:18');
@@ -36,7 +39,7 @@ class HelloWorld extends React.Component {
         </h3>
         <p>
           Say hello to:
-          <input type="text" ref="name" defaultValue={name} onChange={::this._handleChange} />
+          <input type="text" ref={this.setNameDomRef} defaultValue={name} onChange={::this.handleChange} />
         </p>
       </div>
     );

diff --git a/spec/dummy/client/app/components/HelloWorldES5.jsx b/spec/dummy/client/app/components/HelloWorldES5.jsx
@@ -13,11 +13,15 @@ const HelloWorldES5 = React.createClass({
     return this.props.helloWorldData;
   },
 
-  _handleChange() {
-    const name = ReactDOM.findDOMNode(this.refs.name).value;
+  handleChange() {
+    const name =  this.nameDomRef.name;
     this.setState({ name });
   },
 
+  setNameDomRef(nameDomNode) {
+    this.nameDomRef = nameDomNode;
+  },
+
   render() {
     const { name } = this.state;
 
@@ -28,7 +32,7 @@ const HelloWorldES5 = React.createClass({
         </h3>
         <p>
           Say hello to:
-          <input type="text" ref="name" defaultValue={name} onChange={this._handleChange} />
+          <input type="text" ref={this.setNameDomRef} defaultValue={name} onChange={::this.handleChange} />
         </p>
       </div>
     );

diff --git a/spec/dummy/client/app/components/HelloWorldRedux.jsx b/spec/dummy/client/app/components/HelloWorldRedux.jsx
@@ -14,9 +14,13 @@ export default class HelloWorldRedux extends React.Component {
     super(props, context);
   }
 
-  _handleChange() {
-    const name = ReactDOM.findDOMNode(this.refs.name).value;
-    this.props.actions.updateName(name);
+  handleChange() {
+    const name =  this.nameDomRef.name;
+    this.setState({ name });
+  }
+
+  setNameDomRef(nameDomNode) {
+    this.nameDomRef = nameDomNode;
   }
 
   render() {
@@ -30,7 +34,7 @@ export default class HelloWorldRedux extends React.Component {
         </h3>
         <p>
           With Redux, say hello to:
-          <input type="text" ref="name" defaultValue={name} onChange={::this._handleChange} />
+          <input type="text" ref={this.setNameDomRef} defaultValue={name} onChange={::this.handleChange} />
         </p>
       </div>
     );