Summer 2017, Portland, Oregon USA
+October 6th in Verona, Italy
+ +Fall 2017, Poland
diff --git a/docs/forms.html b/docs/forms.html index 9a85c97a45..bae1d1c7bb 100644 --- a/docs/forms.html +++ b/docs/forms.html @@ -224,13 +224,15 @@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.
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:
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.
For example:
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
- isGoing: false,
- numberOfGuests: 0
+ isGoing: true,
+ numberOfGuests: 2
};
this.handleInputChange = this.handleInputChange.bind(this);
@@ -248,27 +250,30 @@
render() {
return (
- <div>
- Is going:
- <input
- name="isGoing"
- type="checkbox"
- checked={this.state.isGoing}
- onChange={this.handleInputChange}
- />
- Number of guests:
- <input
- name="numberOfGuests"
- type="number"
- value={this.state.numberOfGuests}
- onChange={this.handleInputChange}
- />
- </div>
+ <form>
+ <label>
+ Is going:
+ <input
+ name="isGoing"
+ type="checkbox"
+ checked={this.state.isGoing}
+ onChange={this.handleInputChange} />
+ </label>
+ <br />
+ <label>
+ Number of guests:
+ <input
+ name="numberOfGuests"
+ type="number"
+ value={this.state.numberOfGuests}
+ onChange={this.handleInputChange} />
+ </label>
+ </form>
);
}
}
Note how we used the ES6 computed property name syntax to update the state key corresponding to the given input name:
this.setState({
@@ -276,10 +281,12 @@
});
It is equivalent to this ES5 code:
-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, we only needed to call it with the changed parts.
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, an alternative technique for implementing input forms.