Form elements should be either controlled or uncontrolled
This rule applies when a form element such as<input>
,<textarea>
, and<select>
works as both controlled and uncontrolled element.
The followings are controlled elements whose values are controlled by React state and associated handler functions:
value
prop.<input>
element of typeradio
orcheckbox
haschecked
prop.In contrast, the followings are uncontrolled elements with the initial values:
defaultValue
prop.<input>
element of typeradio
orcheckbox
hasdefaultChecked
prop.Therefore, a form element should not have bothvalue
anddefaultValue
props. Also,<input>
element should not have bothchecked
anddefaultChecked
props. React outputs a warning message if you set both props for a form element.
Noncompliant Code Example | Compliant Code Example | ||
---|---|---|---|
1 | import React from 'react'; | 1 | import React from 'react'; |
2 | 2 | ||
3 | export class FormExample extends React.Component { | 3 | export class FormExample extends React.Component { |
4 | constructor(props) { | 4 | constructor(props) { |
5 | super(props); | 5 | super(props); |
6 | this.state = {value: ''}; | 6 | this.state = {value: 'DeepScan'}; |
7 | 7 | ||
8 | this.handleChange = this.handleChange.bind(this); | 8 | this.handleChange = this.handleChange.bind(this); |
9 | this.handleSubmit = this.handleSubmit.bind(this); | 9 | this.handleSubmit = this.handleSubmit.bind(this); |
10 | } | 10 | } |
11 | 11 | ||
12 | handleChange(event) { | 12 | handleChange(event) { |
13 | this.setState({value: event.target.value}); | 13 | this.setState({value: event.target.value}); |
14 | } | 14 | } |
15 | 15 | ||
16 | handleSubmit(event) { | 16 | handleSubmit(event) { |
17 | alert('The submitted value: ' + this.state.value); | 17 | alert('The submitted value: ' + this.state.value); |
18 | event.preventDefault(); | 18 | event.preventDefault(); |
19 | } | 19 | } |
20 | 20 | ||
21 | render() { | 21 | render() { |
22 | return ( | 22 | return ( |
23 | <form onSubmit={this.handleSubmit}> | 23 | <form onSubmit={this.handleSubmit}> |
24 | <label> | 24 | <label> |
25 | Name: | 25 | Name: |
26 | <input type="text" value={this.state.value} defaultValue="DeepScan" onChange={this.handleChange} /> {/* REACT_MISUSED_CONTROLLED_COMPONENT alarm because 'input' element should be either controlled or uncontrolled. */} | 26 | <input type="text" value={this.state.value} onChange={this.handleChange} /> |
27 | </label> | 27 | </label> |
28 | <input type="submit" value="Submit" /> | 28 | <input type="submit" value="Submit" /> |
29 | </form> | 29 | </form> |
30 | ); | 30 | ); |
31 | } | 31 | } |
32 | } | 32 | } |
import React from 'react';export class FormExample extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert('The submitted value: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" value={this.state.value} defaultValue="DeepScan" onChange={this.handleChange} /> {/* REACT_MISUSED_CONTROLLED_COMPONENT alarm because 'input' element should be either controlled or uncontrolled. */} </label> <input type="submit" value="Submit" /> </form> ); }}
import React from 'react';export class FormExample extends React.Component { constructor(props) { super(props); this.state = {value: 'DeepScan'}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert('The submitted value: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" value={this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="Submit" /> </form> ); }}
This rule was introduced in DeepScan 1.8.0-beta.
React Warning: FormExample contains an input of type text with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info:https://fb.me/react-controlled-components