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
Eric Nakagawa committed
Oct 26, 2016 at 13:45 UTC
47e665a2fce846d6d451db7302af5cbd6bf73e53
1 file changed
+31
-25
docs/docs/forms.md
+31
-25
@@ -26,9 +26,11 @@ render() {
26
}
27
```
28
29
-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:
29
+User input has no effect on the rendered element because React has declared the value to be "Hello!".
30
31
-```javascript
31
+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:
32
+
33
+```javascript{10,22,23}
34
class Form extends React.Component {
35
constructor(props) {
36
super(props);
@@ -91,9 +93,9 @@ An **uncontrolled** component manages its own state.
93
}
94
```
95
94
-If you wanted to listen to updates to the value, you could use the `onChange` event just like you can with controlled components.
96
+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.
97
96
-```javascript
98
+```javascript{10,22}
99
class Form extends React.Component {
100
constructor(props) {
101
super(props);
@@ -115,7 +117,6 @@ class Form extends React.Component {
117
<div>
118
<input type="text"
119
placeholder="Hello!"
118
- value={this.state.value}
120
onChange={this.handleChange} />
121
<button onClick={this.handleSubmit}>Submit</button>
122
</div>
@@ -226,7 +227,7 @@ For instance, if you want to imperatively submit a form, one approach would be t
227
228
## Examples
229
229
-### Basic Text Input
230
+### Basic Controlled Input
231
232
```javascript
233
class Form extends React.Component {
@@ -236,7 +237,6 @@ class Form extends React.Component {
237
this.handleChange = this.handleChange.bind(this);
238
this.handleSubmit = this.handleSubmit.bind(this);
239
}
239
-
240
handleChange(event) {
241
this.setState({value: event.target.value});
242
}
@@ -262,7 +262,7 @@ ReactDOM.render(<Form />, document.getElementById('root'));
262
[Try this on CodePen.](https://codepen.io/ericnakagawa/pen/JRmZjz?editors=0010)
263
264
265
-### Basic Textarea
265
+### Basic Controlled Textarea
266
267
```javascript
268
class Form extends React.Component {
@@ -300,7 +300,7 @@ ReactDOM.render(<Form />, document.getElementById('root'));
300
301
[Try this on CodePen.](https://codepen.io/ericnakagawa/pen/kkAQPp?editors=0010)
302
303
-### Basic Select
303
+### Basic Uncontrolled Select
304
305
```javascript
306
class Form extends React.Component {
@@ -360,9 +360,12 @@ class Form extends React.Component {
360
render() {
361
return (
362
<div>
363
- <input type="radio" name="choice" value="A" onChange={this.handleChange} /> Option A<br />
364
- <input type="radio" name="choice" value="B" onChange={this.handleChange} defaultChecked={true} /> Option B<br />
365
- <input type="radio" name="choice" value="C" onChange={this.handleChange} /> Option C<br />
363
+ <input type="radio" name="choice" value="A"
364
+ onChange={this.handleChange} /> Option A<br />
365
+ <input type="radio" name="choice" value="B"
366
+ onChange={this.handleChange} defaultChecked={true} /> Option B<br />
367
+ <input type="radio" name="choice" value="C"
368
+ onChange={this.handleChange} /> Option C<br />
369
<br />
370
<button onClick={this.handleSubmit}>Submit</button>
371
</div>
@@ -376,38 +379,41 @@ ReactDOM.render(<Form />, document.getElementById('root'));
379
[Try this on CodePen.](https://codepen.io/ericnakagawa/pen/WGaYVg?editors=0010)
380
381
379
-### Basic Checkbox
382
+### Basic Uncontrolled Checkbox
383
384
```javascript
385
class Form extends React.Component {
386
constructor(props) {
387
super(props);
385
- this.state = {checked: ["B"]};
388
+ this.state = {checked: {"A": false, "B": true, "C": false}};
389
this.handleChange = this.handleChange.bind(this);
390
this.handleSubmit = this.handleSubmit.bind(this);
391
}
392
393
handleChange(event) {
391
- let val = event.target.value;
392
- let checked = this.state.checked.slice(); // copy
393
- if(checked.includes(val)) {
394
- checked.splice(checked.indexOf(val), 1);
395
- } else {
396
- checked.push(val);
397
- }
394
+ let value = event.target.value;
395
+ let checked = this.state.checked; // copy
396
+ if (!checked[value]) { checked[value] = true; } else { checked[value] = false; }
397
this.setState({checked: checked})
398
}
399
400
handleSubmit(event) {
402
- alert("Boxes checked are: '" + this.state.checked + "'");
401
+ alert("Boxes checked: " +
402
+ (this.state.checked.A ? "A " : "") +
403
+ (this.state.checked.B ? "B " : "") +
404
+ (this.state.checked.C ? "C" : "")
405
+ );
406
}
407
408
render() {
409
return (
410
<div>
408
- <input type="checkbox" value="A" onChange={this.handleChange} /> Option A<br />
409
- <input type="checkbox" value="B" onChange={this.handleChange} defaultChecked={true} /> Option B<br />
410
- <input type="checkbox" value="C" onChange={this.handleChange} /> Option C<br />
411
+ <input type="checkbox" value="A"
412
+ onChange={this.handleChange} /> Option A<br />
413
+ <input type="checkbox" value="B"
414
+ onChange={this.handleChange} defaultChecked={true} /> Option B<br />
415
+ <input type="checkbox" value="C"
416
+ onChange={this.handleChange} /> Option C<br />
417
<br />
418
<button onClick={this.handleSubmit}>Submit</button>
419
</div>