Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Working with forms in React.js
In simple HTML forms, form elements maintain their values internally and submit when the form submission button is clicked. React provides a more controlled approach to handling forms through controlled components.
HTML Form 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 the above example, we have a simple input field for username. The default behavior of HTML forms is to navigate to a new page on form submission. However, React offers better control through form submission handlers that can validate data and provide user feedback.
React Controlled Components
React uses controlled components to handle form data. Instead of letting DOM elements maintain their own state, React components control the input values through their state.
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});
}
handleSubmit(event) {
console.log('Username: ' + this.state.username);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input
type="text"
value={this.state.username}
onChange={this.handleChange}
/>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(<UserForm />, document.getElementById('root'));
Handling Multiple Input Fields
You can handle multiple form inputs with a single event handler function by using the input's name attribute:
class MultiInputForm extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',
email: '',
age: ''
};
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleInputChange(event) {
const value = event.target.value;
const name = event.target.name;
this.setState({
[name]: value
});
}
handleSubmit(event) {
console.log('Form data:', this.state);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Username:
<input
name="username"
type="text"
value={this.state.username}
onChange={this.handleInputChange}
/>
</label>
<br />
<label>
Email:
<input
name="email"
type="email"
value={this.state.email}
onChange={this.handleInputChange}
/>
</label>
<br />
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(<MultiInputForm />, document.getElementById('root'));
Other Form Elements
React controlled components work with various form elements including textarea, select, and radio buttons. Each follows the same pattern of controlled state management.
Uncontrolled Components
Some form elements like file inputs are uncontrolled by nature since they're read-only and only provide their value on form submission. These require different handling approaches using refs.
Best Practices
- Always provide default values to avoid controlled inputs with null values
- Use
event.preventDefault()to prevent default form submission behavior - Consider third-party libraries like Formik for complex form handling with validation
Conclusion
React controlled components provide better form handling than traditional HTML forms by centralizing state management. This approach enables real-time validation, dynamic form behavior, and improved user experience.
506 Views
