Update Ref API in docs (#970)

* Update Ref API in docs

Update to new React.createRef() API in guide "Uncontrolled Components".

* Update Ref API in doc example

Use new Ref API in guide's example.

* Fix syntax error in example

* Update highlighting ranges in docs

After updating to the new createRef API, the highlighting ranges in Uncontrolled Components were wrong.

* Update highlighting ranges in docs example

After updating to the new createRef API, the highlighting ranges in Uncontrolled Components were wrong.

* Update highlighting ranges in docs example

Remove empty line in source code.

* Update uncontrolled-components.md

* Update input-type-file.js

content/docs/uncontrolled-components.md

@@ -10,15 +10,16 @@ To write an uncontrolled component, instead of writing an event handler for ever
 
 For example, this code accepts a single name in an uncontrolled component:
 
-```javascript{8,17}
+```javascript{5,9,18}
 class NameForm extends React.Component {
   constructor(props) {
     super(props);
     this.handleSubmit = this.handleSubmit.bind(this);
+    this.input = React.createRef();
   }
 
   handleSubmit(event) {
-    alert('A name was submitted: ' + this.input.value);
+    alert('A name was submitted: ' + this.input.current.value);
     event.preventDefault();
   }
 
@@ -27,7 +28,7 @@ class NameForm extends React.Component {
       <form onSubmit={this.handleSubmit}>
         <label>
           Name:
-          <input type="text" ref={(input) => this.input = input} />
+          <input type="text" ref={this.input} />
         </label>
         <input type="submit" value="Submit" />
       </form>
@@ -55,7 +56,7 @@ render() {
         <input
           defaultValue="Bob"
           type="text"
-          ref={(input) => this.input = input} />
+          ref={this.input} />
       </label>
       <input type="submit" value="Submit" />
     </form>

examples/uncontrolled-components/input-type-file.js

@@ -1,13 +1,15 @@
 class FileInput extends React.Component {
+  // highlight-range{4}
   constructor(props) {
     super(props);
     this.handleSubmit = this.handleSubmit.bind(this);
+    this.fileInput = React.createRef();
   }
   // highlight-range{4}
   handleSubmit(event) {
     event.preventDefault();
     alert(
-      `Selected file - ${this.fileInput.files[0].name}`
+      `Selected file - ${this.fileInput.current.files[0].name}`
     );
   }
 
@@ -16,12 +18,10 @@ class FileInput extends React.Component {
       <form onSubmit={this.handleSubmit}>
         <label>
           Upload file:
-          {/* highlight-range{1-6} */}
+          {/* highlight-range{1-3} */}
           <input
             type="file"
-            ref={input => {
-              this.fileInput = input;
-            }}
+            ref={this.fileInput}
           />
         </label>
         <br />