A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.
The Uncontrolled Components:
– store its own state
– you query the DOM using a ref to find its current value when you need it.
In the below UserProfile component, the name input is accessed using ref.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
class UserProfile extends React.Component { constructor(props) { super(props) this.handleSubmit = this.handleSubmit.bind(this) this.input = React.createRef() // stores its own state internally } handleSubmit(event) { alert('A name was submitted: ' + this.input.current.value) // uses its own state to get value event.preventDefault() } render() { return ( <form onSubmit={this.handleSubmit}> <label> {'Name:'} <input type="text" ref={this.input} /> <!-- uses ref to query the DOM to find its current value when we need it --> </label> <input type="submit" value="Submit" /> </form> ); } } |