Practice
In React, Uncontrolled Components are those that keep their state internally, and you query the DOM using a ref to find its current value when you need it. This is a little closer to traditional HTML.
In the UserProfile component below, the
class UserProfile extends React.Component {
constructor(props) {
super(props)
this.handleSubmit = this.handleSubmit.bind(this)
this.input = React.createRef()
}
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value)
event.preventDefault()
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
{'Name:'}
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
In most cases it is recommended to use controlled components to implement forms.
Comments