From e5ca6f513a631fb6b6c8d9e8d8a2a6b99bdf9526 Mon Sep 17 00:00:00 2001
From: Eric Nakagawa <ericnakagawa@gmail.com>
Date: Wed, 26 Oct 2016 13:45:25 -0700
Subject: [PATCH] Forms Update (#8112)

* Reapplied fixes to updated docs from master

* Reapplied fixes to Forms, removed ES2016 function includes()

* Missing carriage return

* Adding back some line breaks

* Making requested changes.

* Making space changes
---
 docs/forms.md | 56 ++++++++++++++++++++++++++++-----------------------
 1 file changed, 31 insertions(+), 25 deletions(-)

diff --git a/docs/forms.md b/docs/forms.md
index 63998ce83..aed23b821 100644
--- a/docs/forms.md
+++ b/docs/forms.md
@@ -26,9 +26,11 @@ render() {
 }
 ```
 
-User input has no effect on the rendered element because React has declared the value to be "Hello!". To update the value in response to user input, you would use the onChange event:
+User input has no effect on the rendered element because React has declared the value to be "Hello!".
 
-```javascript
+To update the value in response to user input, you would use the `onChange` event to save the new value, then pass that to the `value` prop of the form:
+
+```javascript{10,22,23}
 class Form extends React.Component {
   constructor(props) {
     super(props);
@@ -91,9 +93,9 @@ An **uncontrolled** component manages its own state.
   }
 ```
 
-If you wanted to listen to updates to the value, you could use the `onChange` event just like you can with controlled components.
+If you wanted to listen to updates to the value, you could use the `onChange` event just like you can with controlled components. However, you would _not_ pass the value you saved to the component.
 
-```javascript
+```javascript{10,22}
 class Form extends React.Component {
   constructor(props) {
     super(props);
@@ -115,7 +117,6 @@ class Form extends React.Component {
       <div>
         <input type="text"
           placeholder="Hello!"
-          value={this.state.value}
           onChange={this.handleChange} />
         <button onClick={this.handleSubmit}>Submit</button>
       </div>
@@ -226,7 +227,7 @@ For instance, if you want to imperatively submit a form, one approach would be t
 
 ## Examples
 
-### Basic Text Input
+### Basic Controlled Input
 
 ```javascript
 class Form extends React.Component {
@@ -236,7 +237,6 @@ class Form extends React.Component {
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
-
   handleChange(event) {
     this.setState({value: event.target.value});
   }
@@ -262,7 +262,7 @@ ReactDOM.render(<Form />, document.getElementById('root'));
 [Try this on CodePen.](https://codepen.io/ericnakagawa/pen/JRmZjz?editors=0010)
 
 
-### Basic Textarea
+### Basic Controlled Textarea
 
 ```javascript
 class Form extends React.Component {
@@ -300,7 +300,7 @@ ReactDOM.render(<Form />, document.getElementById('root'));
 
 [Try this on CodePen.](https://codepen.io/ericnakagawa/pen/kkAQPp?editors=0010)
 
-### Basic Select
+### Basic Uncontrolled Select
 
 ```javascript
 class Form extends React.Component {
@@ -360,9 +360,12 @@ class Form extends React.Component {
   render() {
     return (
       <div>
-        <input type="radio" name="choice" value="A" onChange={this.handleChange} /> Option A<br />
-        <input type="radio" name="choice" value="B" onChange={this.handleChange} defaultChecked={true} /> Option B<br />
-        <input type="radio" name="choice" value="C" onChange={this.handleChange} /> Option C<br />
+        <input type="radio" name="choice" value="A"
+          onChange={this.handleChange} /> Option A<br />
+        <input type="radio" name="choice" value="B"
+          onChange={this.handleChange} defaultChecked={true} /> Option B<br />
+        <input type="radio" name="choice" value="C"
+          onChange={this.handleChange} /> Option C<br />
         <br />
         <button onClick={this.handleSubmit}>Submit</button>
       </div>
@@ -376,38 +379,41 @@ ReactDOM.render(<Form />, document.getElementById('root'));
 [Try this on CodePen.](https://codepen.io/ericnakagawa/pen/WGaYVg?editors=0010)
 
 
-### Basic Checkbox
+### Basic Uncontrolled Checkbox
 
 ```javascript
 class Form extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {checked: ["B"]};
+    this.state = {checked: {"A": false, "B": true, "C": false}};
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
   handleChange(event) {
-    let val = event.target.value;
-    let checked = this.state.checked.slice(); // copy
-    if(checked.includes(val)) {
-      checked.splice(checked.indexOf(val), 1);
-    } else {
-      checked.push(val);
-    }
+    let value = event.target.value;
+    let checked = this.state.checked; // copy 
+    if (!checked[value]) { checked[value] = true; } else { checked[value] = false; }
     this.setState({checked: checked})
   }
 
   handleSubmit(event) {
-    alert("Boxes checked are: '" + this.state.checked + "'");
+    alert("Boxes checked: " +
+      (this.state.checked.A ? "A " : "") +
+      (this.state.checked.B ? "B " : "") +
+      (this.state.checked.C ? "C" : "")
+    );
   }
 
   render() {
     return (
       <div>
-        <input type="checkbox" value="A" onChange={this.handleChange} /> Option A<br />
-        <input type="checkbox" value="B" onChange={this.handleChange} defaultChecked={true} /> Option B<br />
-        <input type="checkbox" value="C" onChange={this.handleChange} /> Option C<br />
+        <input type="checkbox" value="A"
+          onChange={this.handleChange} /> Option A<br />
+        <input type="checkbox" value="B"
+          onChange={this.handleChange} defaultChecked={true} /> Option B<br />
+        <input type="checkbox" value="C"
+          onChange={this.handleChange} /> Option C<br />
         <br />
         <button onClick={this.handleSubmit}>Submit</button>
       </div>