Add a link to "State Updates are Merged" in the forms doc (#8851)
* Added a link to "State Updates are Merged" * better inline links * moved the explanation down * Minor unrelated tweaks
Keyan Zhang committed
Jan 24, 2017 at 04:09 UTC
eb89bc4c301c5970b1ec88d3fdfa2202d4dca4f8
1 file changed
+31
-24
docs/docs/forms.md
+31
-24
@@ -184,15 +184,17 @@ Overall, this makes it so that `<input type="text">`, `<textarea>`, and `<select
184
185
## Handling Multiple Inputs
186
187
-When you need to handle multiple controlled `input` elements, you can add a `name` attribute to each element and let a handler function choose what to do based on the value of `event.target.name`. For example:
187
+When you need to handle multiple controlled `input` elements, you can add a `name` attribute to each element and let the handler function choose what to do based on the value of `event.target.name`.
188
189
-```javascript{15,18,27,34}
189
+For example:
190
+
191
+```javascript{15,18,28,37}
192
class Reservation extends React.Component {
193
constructor(props) {
194
super(props);
195
this.state = {
194
- isGoing: false,
195
- numberOfGuests: 0
196
+ isGoing: true,
197
+ numberOfGuests: 2
198
};
199
200
this.handleInputChange = this.handleInputChange.bind(this);
@@ -210,28 +212,31 @@ class Reservation extends React.Component {
212
213
render() {
214
return (
213
- <div>
214
- Is going:
215
- <input
216
- name="isGoing"
217
- type="checkbox"
218
- checked={this.state.isGoing}
219
- onChange={this.handleInputChange}
220
- />
221
- Number of guests:
222
- <input
223
- name="numberOfGuests"
224
- type="number"
225
- value={this.state.numberOfGuests}
226
- onChange={this.handleInputChange}
227
- />
228
- </div>
215
+ <form>
216
+ <label>
217
+ Is going:
218
+ <input
219
+ name="isGoing"
220
+ type="checkbox"
221
+ checked={this.state.isGoing}
222
+ onChange={this.handleInputChange} />
223
+ </label>
224
+ <br />
225
+ <label>
226
+ Number of guests:
227
+ <input
228
+ name="numberOfGuests"
229
+ type="number"
230
+ value={this.state.numberOfGuests}
231
+ onChange={this.handleInputChange} />
232
+ </label>
233
+ </form>
234
);
235
}
236
}
237
```
238
234
-[Try it on CodePen.](https://codepen.io/keyanzhang/pen/pRENvx?editors=0010)
239
+[Try it on CodePen.](https://codepen.io/gaearon/pen/wgedvV?editors=0010)
240
241
Note how we used the ES6 [computed property name](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) syntax to update the state key corresponding to the given input name:
242
@@ -244,11 +249,13 @@ this.setState({
249
It is equivalent to this ES5 code:
250
251
```js{2}
247
-var nextState = {};
248
-nextState[name] = value;
249
-this.setState(nextState);
252
+var partialState = {};
253
+partialState[name] = value;
254
+this.setState(partialState);
255
```
256
257
+Also, since `setState()` automatically [merges a partial state into the current state](/react/docs/state-and-lifecycle.html#state-updates-are-merged), we only needed to call it with the changed parts.
258
+
259
## Alternatives to Controlled Components
260
261
It can sometimes be tedious to use controlled components, because you need to write an event handler for every way your data can change and pipe all of the input state through a React component. This can become particularly annoying when you are converting a preexisting codebase to React, or integrating a React application with a non-React library. In these situations, you might want to check out [uncontrolled components](/react/docs/uncontrolled-components.html), an alternative technique for implementing input forms.