Forms and Controlled Components in React
Key Concepts
- Controlled Components
- Uncontrolled Components
- Handling Form Inputs
- Form Validation
- Submitting Forms
- Multi-Input Forms
- Form State Management
Controlled Components
Controlled Components are form elements whose values are controlled by React state. The value of the input is set by the state, and any changes to the input are handled by updating the state. This ensures that the React state is the single source of truth for the form data.
Example:
import React, { useState } from 'react';
function ControlledForm() {
const [name, setName] = useState('');
const handleChange = (event) => {
setName(event.target.value);
};
return (
<form>
<input
type="text"
value={name}
onChange={handleChange}
/>
<p>Hello, {name}!</p>
</form>
);
}
Uncontrolled Components
Uncontrolled Components are form elements whose values are handled by the DOM itself. Instead of using React state, you use a ref to get form values from the DOM. This approach is less common in React but can be useful for simple forms or integrating with non-React code.
Example:
import React, { useRef } from 'react';
function UncontrolledForm() {
const inputRef = useRef(null);
const handleSubmit = (event) => {
event.preventDefault();
alert(inputRef.current.value);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
ref={inputRef}
/>
<button type="submit">Submit</button>
</form>
);
}
Handling Form Inputs
Handling form inputs involves capturing user input and updating the state accordingly. For controlled components, this is done by setting the value of the input to the state and updating the state on change events.
Example:
import React, { useState } from 'react';
function InputForm() {
const [input, setInput] = useState('');
const handleChange = (event) => {
setInput(event.target.value);
};
return (
<form>
<input
type="text"
value={input}
onChange={handleChange}
/>
<p>You typed: {input}</p>
</form>
);
}
Form Validation
Form validation ensures that user input meets certain criteria before submission. React allows you to validate form inputs by checking the state values and displaying error messages if necessary.
Example:
import React, { useState } from 'react';
function ValidationForm() {
const [email, setEmail] = useState('');
const [error, setError] = useState('');
const handleChange = (event) => {
setEmail(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
if (!email.includes('@')) {
setError('Invalid email');
} else {
setError('');
alert('Email submitted: ' + email);
}
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={email}
onChange={handleChange}
/>
{error && <p>{error}</p>}
<button type="submit">Submit</button>
</form>
);
}
Submitting Forms
Submitting forms involves capturing the form data and sending it to a server or processing it locally. In React, form submission is handled by attaching an onSubmit event handler to the form element.
Example:
import React, { useState } from 'react';
function SubmitForm() {
const [name, setName] = useState('');
const handleChange = (event) => {
setName(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
alert('Form submitted: ' + name);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={name}
onChange={handleChange}
/>
<button type="submit">Submit</button>
</form>
);
}
Multi-Input Forms
Multi-input forms involve handling multiple form inputs in a single form. This can be done by managing multiple state variables or using a single state object to store all form data.
Example:
import React, { useState } from 'react';
function MultiInputForm() {
const [formData, setFormData] = useState({
name: '',
email: '',
message: ''
});
const handleChange = (event) => {
setFormData({
...formData,
[event.target.name]: event.target.value
});
};
const handleSubmit = (event) => {
event.preventDefault();
alert(JSON.stringify(formData, null, 2));
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
placeholder="Name"
/>
<input
type="text"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="Email"
/>
<textarea
name="message"
value={formData.message}
onChange={handleChange}
placeholder="Message"
/>
<button type="submit">Submit</button>
</form>
);
}
Form State Management
Form state management involves keeping track of form data and updating it as the user interacts with the form. This can be done using React's useState hook or more advanced state management libraries like Redux.
Example:
import React, { useState } from 'react';
function FormStateManagement() {
const [formData, setFormData] = useState({
name: '',
email: ''
});
const handleChange = (event) => {
setFormData({
...formData,
[event.target.name]: event.target.value
});
};
const handleSubmit = (event) => {
event.preventDefault();
alert(JSON.stringify(formData, null, 2));
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
placeholder="Name"
/>
<input
type="text"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="Email"
/>
<button type="submit">Submit</button>
</form>
);
}
Analogies
Think of a form as a questionnaire. Each question (input) has an answer (value), and the questionnaire (form) is filled out by the user (state). The form is submitted (onSubmit) when the user is done, and the answers are processed (handleSubmit).
Another analogy is a shopping cart. Each item (input) is added to the cart (state), and the cart is checked out (onSubmit) when the user is ready to purchase. The items are validated (form validation) to ensure they meet the store's requirements.