Tweak examples
Dan Abramov committed
Nov 17, 2016 at 14:23 UTC
3186a8b984490269de01d79f90735d9880324626
2 files changed
+19
-15
docs/docs/forms.md
+5
-5
@@ -31,7 +31,7 @@ We can combine the two by making the React state be the "single source of truth"
31
32
For example, if we want to make the previous example log the name when it is submitted, we can write the form as a controlled component:
33
34
-```javascript{4,10-12,23}
34
+```javascript{4,10-12,24}
35
class NameForm extends React.Component {
36
constructor(props) {
37
super(props);
@@ -64,7 +64,7 @@ class NameForm extends React.Component {
64
}
65
```
66
67
-[Try it on CodePen.](https://codepen.io/lacker/pen/oYNzxY?editors=0010)
67
+[Try it on CodePen.](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
68
69
Since the `value` attribute is set on our form element, the displayed value will always be `this.state.value`, making the React state the source of truth. Since `handleChange` runs on every keystroke to update the React state, the displayed value will update as the user types.
70
@@ -88,7 +88,7 @@ In HTML, a `<textarea>` element defines its text by its children:
88
89
In React, a `<textarea>` uses a `value` attribute instead. This way, a form using a `<textarea>` can be written very similarly to a form that uses a single-line input:
90
91
-```javascript{4-6,12-14,25}
91
+```javascript{4-6,12-14,26}
92
class EssayForm extends React.Component {
93
constructor(props) {
94
super(props);
@@ -140,7 +140,7 @@ In HTML, `<select>` creates a drop-down list. For example, this HTML creates a d
140
141
Note that the Coconut option is initially selected, because of the `selected` attribute. React, instead of using this `selected` attribute, uses a `value` attribute on the root `select` tag. This is more convenient in a controlled component because you only need to update it in one place. For example:
142
143
-```javascript{4,10-12,23}
143
+```javascript{4,10-12,24}
144
class FlavorForm extends React.Component {
145
constructor(props) {
146
super(props);
@@ -178,7 +178,7 @@ class FlavorForm extends React.Component {
178
}
179
```
180
181
-[Try it on CodePen.](https://codepen.io/lacker/pen/QGWKQP?editors=0010)
181
+[Try it on CodePen.](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
182
183
Overall, this makes it so that `<input type="text">`, `<textarea>`, and `<select>` all work very similarly - they all accept a `value` attribute that you can use to implement a controlled component.
184
docs/docs/uncontrolled-components.md
+14
-10
@@ -10,7 +10,7 @@ To write an uncontrolled component, instead of writing an event handler for ever
10
11
For example, this code accepts a single name in an uncontrolled component:
12
13
-```javascript{8,16}
13
+```javascript{8,17}
14
class NameForm extends React.Component {
15
constructor(props) {
16
super(props);
@@ -25,8 +25,10 @@ class NameForm extends React.Component {
25
render() {
26
return (
27
<form onSubmit={this.handleSubmit}>
28
- Name:
29
- <input type="text" ref={(input) => this.input = input} />
28
+ <label>
29
+ Name:
30
+ <input type="text" ref={(input) => this.input = input} />
31
+ </label>
32
<input type="submit" value="Submit" />
33
</form>
34
);
@@ -34,7 +36,7 @@ class NameForm extends React.Component {
36
}
37
```
38
37
-[Try it on CodePen.](https://codepen.io/lacker/pen/XNWjOj?editors=0010)
39
+[Try it on CodePen.](https://codepen.io/gaearon/pen/WooRWa?editors=0010)
40
41
Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components.
42
@@ -42,15 +44,17 @@ Since an uncontrolled component keeps the source of truth in the DOM, it is some
44
45
In the React rendering lifecycle, the `value` attribute on form elements will override the value in the DOM. With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a `defaultValue` attribute instead of `value`.
46
45
-```javascript{6}
47
+```javascript{7}
48
render() {
49
return (
50
<form onSubmit={this.handleSubmit}>
49
- Name:
50
- <input
51
- defaultValue="Bob"
52
- type="text"
53
- ref={(input) => this.input = input} />
51
+ <label>
52
+ Name:
53
+ <input
54
+ defaultValue="Bob"
55
+ type="text"
56
+ ref={(input) => this.input = input} />
57
+ </label>
58
<input type="submit" value="Submit" />
59
</form>
60
);