Forms Update (facebook#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
artgoce · Oct 26, 2016 · 47e665a · 47e665a
1 parent 2ef1208
commit 47e665a
Showing 1 changed file with 31 additions and 25 deletions.
diff --git a/docs/docs/forms.md b/docs/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>