Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Uncontrolled Component in React.js
In controlled component form data is handled by React component by writing event handler for state updates. But in uncontrolled component, form data is handled by DOM itself.
ref is used to receive the form value from DOM.
Example
class UserNameForm extends React.Component {
constructor(props) {
super(props);
this.handleFormSubmit = this.handleFormSubmit.bind(this);
this.inputUserName = React.createRef();
}
handleFormSubmit(event) {
console.log('username: ' + this.inputUserName.current.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleFormSubmit}>
<label>
Name:
<input type="text" ref={this.inputUserName} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}Reacts createRef function creates areference for form field and on form submission we can access the field value suing this.inputUserName.current .value. Notice the use of current after ref name.
It’s a quick and dirty solution with less code actually but with less control.
With uncontrolled component React provided an attribute called as defaultValue to give the initial value to form field.
render() {
return (
<form onSubmit={this.handleFormSubmit}>
<label>
User Name:
<input
defaultValue="Steve"
type="text"
ref={this.inputUserName} />
</label>
<input type="submit" value="Submit" />
</form>
);
}The input type file is always an uncontrolled component because its value can be set by user only and not by programmatically.
Example
Example of file input −
class FileInputExample extends React.Component {
constructor(props) {
super(props);
this.handleFormSubmit = this.handleFormSubmit.bind(this);
this.selectedFileInput = React.createRef();
}
handleFormSubmit(event) {
event.preventDefault();
console.log(
`Selected file - ${
this.selectedFileInput.current.files[0].name
}`
);
}
render() {
return (
<form onSubmit={this.handleFormSubmit}>
<label>
Upload file:
<input type="file" ref={this.selectedFileInput } />
</label>
<br />
<button type="submit">Submit</button>
</form>
);
}
}
ReactDOM.render(
<FileInputExample />,
document.getElementById('root')
);
347 Views
