diff --git a/docs/forms.md b/docs/forms.md index 67d10293..1e9ac4a4 100644 --- a/docs/forms.md +++ b/docs/forms.md @@ -184,15 +184,17 @@ Overall, this makes it so that ``, ``, and ` - Is going: - - Number of guests: - - + + + Is going: + + + + + Number of guests: + + + ); } } ``` -[Try it on CodePen.](https://codepen.io/keyanzhang/pen/pRENvx?editors=0010) +[Try it on CodePen.](https://codepen.io/gaearon/pen/wgedvV?editors=0010) 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: @@ -244,11 +249,13 @@ this.setState({ It is equivalent to this ES5 code: ```js{2} -var nextState = {}; -nextState[name] = value; -this.setState(nextState); +var partialState = {}; +partialState[name] = value; +this.setState(partialState); ``` +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. + ## Alternatives to Controlled Components 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.