[フレーム]

Handling Forms and Validation in React

⚛️ Introduction

Forms are one of the most essential parts of any web application — from login pages to contact forms and checkout screens.

But managing form inputs, tracking user data, and validating it efficiently can be tricky. 😅

Luckily, React provides simple yet powerful tools to handle forms and validation in a clean, declarative way.

In this article, we’ll explore:

✅ How to handle form inputs in React

✅ Controlled vs Uncontrolled Components

✅ Validation techniques (manual & library-based)

✅ Practical examples and best practices

Let’s dive in! 🚀

🧾 1. Forms in React — The Basics

In traditional HTML, form elements like <input>, <textarea>, and <select> maintain their own internal state.

But in React, state should be controlled by components — that’s where controlled components come in.

🎛️ 2. Controlled Components

A controlled component means the form data is handled by the React component’s state instead of the DOM.

Example 👇

import React, { useState } from "react";
function SimpleForm() {
const [name, setName] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
alert(`Hello, ${name}!`);
};
return (
<form onSubmit={handleSubmit}>
<label>Enter your name:</label><br />
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
);
}

🧠 How It Works

  • The value of the input is linked to React’s state (name).

  • Every keystroke triggers onChange, updating the state.

  • When submitted, you can access name directly from the component.

✅ Benefits

  • Easy to manage and validate data.

  • Keeps form values in sync with React state.

🪄 3. Uncontrolled Components

In uncontrolled components, form data is handled by the DOM itself — not React state.

You access values using refs.

Example 👇

import React, { useRef } from "react";
function UncontrolledForm() {
const inputRef = useRef();
const handleSubmit = (e) => {
e.preventDefault();
alert(`Hello, ${inputRef.current.value}!`);
};
return (
<form onSubmit={handleSubmit}>
<input type="text" ref={inputRef} />
<button type="submit">Submit</button>
</form>
);
}

✅ Simpler for quick forms

⚠️ But harder to validate and debug — that’s why most React apps use controlled components.

✅ 4. Handling Multiple Inputs

If you have several fields, you can manage them in one state object.

Here’s an example with name and email 👇

import React, { useState } from "react";
function MultiInputForm() {
const [formData, setFormData] = useState({
name: "",
email: "",
});
const handleChange = (e) => {
const { name, value } = e.target;
setFormData((prev) => ({
...prev,
[name]: value,
}));
};
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
};
return (
<form onSubmit={handleSubmit}>
<label>Name:</label>
<input name="name" value={formData.name} onChange={handleChange} />
<br />
<label>Email:</label>
<input name="email" value={formData.email} onChange={handleChange} />
<br />
<button type="submit">Submit</button>
</form>
);
}

🎯 This approach scales easily when your form grows.

🧩 5. Form Validation — Why It Matters

Form validation ensures users enter correct and complete data before submission.

React offers two main ways to validate forms:

  1. Manual Validation (using custom logic)

  2. Library-Based Validation (using tools like Formik or React Hook Form)

Let’s look at both 👇

🔍 6. Manual Validation

You can validate fields before submission with simple JavaScript checks.

Example 👇

function SignupForm() {
const [email, setEmail] = useState("");
const [error, setError] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
if (!email.includes("@")) {
setError("Please enter a valid email.");
} else {
setError("");
alert("Form submitted successfully!");
}
};
return (
<form onSubmit={handleSubmit}>
<input
type="email"
placeholder="Enter email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
{error && <p style={{ color: "red" }}>{error}</p>}
<button type="submit">Submit</button>
</form>
);
}

🧠 This approach gives full control — but can get messy with large forms.

⚙️ 7. Form Validation with Libraries

For complex forms (multiple fields, error messages, etc.), libraries like Formik or React Hook Form make validation simple and elegant.

🚀 Example using React Hook Form

npm install react-hook-form

Then use it in your component 👇

import React from "react";
import { useForm } from "react-hook-form";
function RHFForm() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input
{...register("email", {
required: "Email is required",
pattern: {
value: /^\S+@\S+$/i,
message: "Invalid email format",
},
})}
placeholder="Enter email"
/>
{errors.email && <p>{errors.email.message}</p>}
<button type="submit">Submit</button>
</form>
);
}

🎉 Advantages of React Hook Form:

  • Less code, fewer re-renders ⚡

  • Built-in validation

  • Easy integration with UI libraries

🌟 8. Common Form Best Practices

  • ✅ Always prevent default form submission using e.preventDefault()

  • ✅ Use controlled components for better control

  • ✅ Provide clear error messages and visual feedback

  • ✅ Use autoFocus and required attributes where needed

  • ✅ Sanitize user input to prevent security issues

  • ✅ Consider form libraries for large or dynamic forms

🧠 9. Controlled vs Uncontrolled Summary

Feature Controlled Uncontrolled

  • State Managed by React Managed by DOM

  • Validation Easy Harder

  • Performance Slightly slower Faster (small forms)

  • Use Case: Most React forms are Simple, quick forms

💡 10. Wrapping Up

Handling forms and validation in React might seem challenging at first,

but once you understand state management, controlled components, and validation logic,

it becomes super intuitive 💪

React gives you the flexibility to:

Build a custom form

Or use battle-tested libraries for large projects 🚀

Whether it’s a simple contact form or a full registration system — React makes it elegant, powerful, and scalable. ⚛️💫

People also reading
Membership not found

AltStyle によって変換されたページ (->オリジナル) /