- Trending Categories
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
Working with forms in React.js
In simple html form, the form elements keeps value with it internally and submit on form submission button.
Example
<!DOCTYPE html> <html> <head> <title>Form Example</title> </head> <body> <form> <label> User Name: <input type="text" name="username" /> </label> <input type="submit" value="Submit Form" /> </form> </body> </html>
In above example, we have a simple input called username and we can receive its value on form submission. The default behavior of html form is to navigate to new page i.e. the post form submission page.
But it can give more advantage if we have a form submission handler JavaScript function which can validate the form data as well. The validation will give the relevant feedback to user.
React has a technique to handle form submission which is called as controlled components.
As in html, the elements like input, textarea etc keeps their own state and updates based on user actions. In React the mutable fields are kept with state object.
Handling username field in React’s approach of controlled component −
class UserForm extends React.Component {
constructor(props) {
super(props);
this.state = {username: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({username: event.target.value});
}
handleFormSubmit(event) {
console.log('username: ' + this.state.username);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleFormSubmit}>
<label>
Name:
<input type="text" value={this.state.username} onChange={this.handleUsernameChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}Here we have onChange handler function for updating state field username.
On formSubmit we are just showing console log in browser to display the submitted user name.
The other controlled type of components are textarea, select tag , radio buttons etc.
There are some uncontrolled component as well like file type which are read only in nature and only gets their value on form submission.
Handling multiple form inputs with single JS function −
handleInputChange(event) {
const value = event.target.value;
const name = event.target.name;
this.setState({
[name]: value
});
}Controlled input with null value for fields should be avoided by providing a default value for fields using state initiations.
For full scale solutions on form handling in React can be done using third party libraries like formik. It’s simple to use validations, feedback to user and more.
- Related Articles
- SVG morphing in React JS
- Using pointer light for better lighting in React JS with React-Three-Fiber
- Adding Lottie animation in React JS
- SVG drawing in React JS frontend
- Creating a Particle Animation in React JS
- Creating a Customizable Modal in React JS
- Creating animated loading skeletons in React JS
- Drawing arrows between DOM elements in React JS using react-archer
- Creating an Airbnb Rheostat Slider in React JS
- Creating a Rich Text Editor in React JS
- Device Detection and Responsive Design in React JS
- SVG zoom-in and zoom-out in React JS
- How to make a resizable element in React JS
- Making a timer in React JS using reactspring animation
- Creating an Excel-like data grid in React JS
