diff --git a/docs/docs/forms.md b/docs/docs/forms.md index 63998ce832b4b..aed23b821e232 100644 --- a/docs/docs/forms.md +++ b/docs/docs/forms.md @@ -26,9 +26,11 @@ render() { } ``` -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: +User input has no effect on the rendered element because React has declared the value to be "Hello!". -```javascript +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: + +```javascript{10,22,23} class Form extends React.Component { constructor(props) { super(props); @@ -91,9 +93,9 @@ An **uncontrolled** component manages its own state. } ``` -If you wanted to listen to updates to the value, you could use the `onChange` event just like you can with controlled components. +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. -```javascript +```javascript{10,22} class Form extends React.Component { constructor(props) { super(props); @@ -115,7 +117,6 @@ class Form extends React.Component {
@@ -226,7 +227,7 @@ For instance, if you want to imperatively submit a form, one approach would be t ## Examples -### Basic Text Input +### Basic Controlled Input ```javascript class Form extends React.Component { @@ -236,7 +237,6 @@ class Form extends React.Component { this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } - handleChange(event) { this.setState({value: event.target.value}); } @@ -262,7 +262,7 @@ ReactDOM.render(
, document.getElementById('root')); [Try this on CodePen.](https://codepen.io/ericnakagawa/pen/JRmZjz?editors=0010) -### Basic Textarea +### Basic Controlled Textarea ```javascript class Form extends React.Component { @@ -300,7 +300,7 @@ ReactDOM.render(, document.getElementById('root')); [Try this on CodePen.](https://codepen.io/ericnakagawa/pen/kkAQPp?editors=0010) -### Basic Select +### Basic Uncontrolled Select ```javascript class Form extends React.Component { @@ -360,9 +360,12 @@ class Form extends React.Component { render() { return (
- Option A
- Option B
- Option C
+ Option A
+ Option B
+ Option C

@@ -376,38 +379,41 @@ ReactDOM.render(, document.getElementById('root')); [Try this on CodePen.](https://codepen.io/ericnakagawa/pen/WGaYVg?editors=0010) -### Basic Checkbox +### Basic Uncontrolled Checkbox ```javascript class Form extends React.Component { constructor(props) { super(props); - this.state = {checked: ["B"]}; + this.state = {checked: {"A": false, "B": true, "C": false}}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { - let val = event.target.value; - let checked = this.state.checked.slice(); // copy - if(checked.includes(val)) { - checked.splice(checked.indexOf(val), 1); - } else { - checked.push(val); - } + let value = event.target.value; + let checked = this.state.checked; // copy + if (!checked[value]) { checked[value] = true; } else { checked[value] = false; } this.setState({checked: checked}) } handleSubmit(event) { - alert("Boxes checked are: '" + this.state.checked + "'"); + alert("Boxes checked: " + + (this.state.checked.A ? "A " : "") + + (this.state.checked.B ? "B " : "") + + (this.state.checked.C ? "C" : "") + ); } render() { return (
- Option A
- Option B
- Option C
+ Option A
+ Option B
+ Option C