Handling Form Submission in React
Key Concepts
- Controlled Components
- Uncontrolled Components
- Handling Form Submission
- Preventing Default Behavior
- Accessing Form Data
- Form Validation
- Submitting Data to an API
Controlled Components
In React, controlled components are form elements whose values are controlled by the state of the component. The value of the input is set by the state, and any change to the input updates the state.
Example:
function ControlledForm() {
const [value, setValue] = React.useState('');
const handleChange = (event) => {
setValue(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
alert('Form submitted with value: ' + value);
};
return (
<form onSubmit={handleSubmit}>
<input type="text" value={value} onChange={handleChange} />
<button type="submit">Submit</button>
</form>
);
}
Uncontrolled Components
Uncontrolled components are form elements whose values are handled by the DOM itself. Instead of using state to manage the input value, you use a ref to get the input value directly from the DOM.
Example:
function UncontrolledForm() {
const inputRef = React.useRef(null);
const handleSubmit = (event) => {
event.preventDefault();
alert('Form submitted with value: ' + inputRef.current.value);
};
return (
<form onSubmit={handleSubmit}>
<input type="text" ref={inputRef} />
<button type="submit">Submit</button>
</form>
);
}
Handling Form Submission
Form submission in React is handled by attaching an onSubmit event handler to the form element. This handler is called when the form is submitted, typically by clicking a submit button.
Example:
function FormSubmission() {
const handleSubmit = (event) => {
event.preventDefault();
alert('Form submitted');
};
return (
<form onSubmit={handleSubmit}>
<button type="submit">Submit</button>
</form>
);
}
Preventing Default Behavior
To prevent the default form submission behavior, which usually involves a page reload, you can call the preventDefault() method on the event object in the onSubmit handler.
Example:
function FormSubmission() {
const handleSubmit = (event) => {
event.preventDefault();
alert('Form submitted without page reload');
};
return (
<form onSubmit={handleSubmit}>
<button type="submit">Submit</button>
</form>
);
}
Accessing Form Data
To access form data, you can use the event.target property in the onSubmit handler. This property gives you access to the form elements, allowing you to retrieve their values.
Example:
function FormDataAccess() {
const handleSubmit = (event) => {
event.preventDefault();
const formData = new FormData(event.target);
const data = Object.fromEntries(formData.entries());
alert('Form data: ' + JSON.stringify(data));
};
return (
<form onSubmit={handleSubmit}>
<input type="text" name="username" />
<input type="password" name="password" />
<button type="submit">Submit</button>
</form>
);
}
Form Validation
Form validation is the process of ensuring that the data entered by the user meets certain criteria before it is submitted. You can perform validation in the onSubmit handler or in the onChange handler for each input.
Example:
function FormValidation() {
const [username, setUsername] = React.useState('');
const [password, setPassword] = React.useState('');
const [error, setError] = React.useState('');
const handleSubmit = (event) => {
event.preventDefault();
if (username.length < 3) {
setError('Username must be at least 3 characters');
} else if (password.length < 6) {
setError('Password must be at least 6 characters');
} else {
setError('');
alert('Form submitted');
}
};
return (
<form onSubmit={handleSubmit}>
<input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
{error && <p>{error}</p>}
<button type="submit">Submit</button>
</form>
);
}
Submitting Data to an API
To submit form data to an API, you can use the fetch API or a library like axios in the onSubmit handler. After validating the form data, you can send a POST request to the API with the form data.
Example:
function FormAPISubmission() {
const [username, setUsername] = React.useState('');
const [password, setPassword] = React.useState('');
const [error, setError] = React.useState('');
const handleSubmit = async (event) => {
event.preventDefault();
if (username.length < 3) {
setError('Username must be at least 3 characters');
} else if (password.length < 6) {
setError('Password must be at least 6 characters');
} else {
setError('');
const response = await fetch('/api/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username, password }),
});
if (response.ok) {
alert('Form submitted successfully');
} else {
setError('Failed to submit form');
}
}
};
return (
<form onSubmit={handleSubmit}>
<input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
{error && <p>{error}</p>}
<button type="submit">Submit</button>
</form>
);
}
Analogies
Think of form submission in React as ordering food at a restaurant. The form is like the menu, and the submit button is like the "Place Order" button. The form data is like the order details, and the onSubmit handler is like the waiter who takes the order and ensures it is correct before sending it to the kitchen (API).
Another analogy is a job application. The form is like the application form, and the submit button is like the "Submit Application" button. The form data is like the applicant's details, and the onSubmit handler is like the HR department that reviews the application and ensures it meets the criteria before sending it to the hiring manager (API).