|
| 1 | +# React JS Forms |
| 2 | + |
| 3 | +Handling forms in React is an essential skill for building interactive web applications. This guide will explore different methods to manage form state and handle form submission, including controlled components, uncontrolled components, and libraries like Formik. |
| 4 | + |
| 5 | +## Table of Contents |
| 6 | + |
| 7 | +- [Introduction to React Forms](#introduction-to-react-forms) |
| 8 | +- [Controlled Components](#controlled-components) |
| 9 | +- [Uncontrolled Components](#uncontrolled-components) |
| 10 | +- [Using Formik](#using-formik) |
| 11 | +- [Validation Techniques](#validation-techniques) |
| 12 | +- [Best Practices](#best-practices) |
| 13 | + |
| 14 | +--- |
| 15 | + |
| 16 | +## Introduction to React Forms |
| 17 | + |
| 18 | +Forms in React can manage input from the user, which is often necessary for tasks like login, registration, and data entry. |
| 19 | + |
| 20 | +## Controlled Components |
| 21 | + |
| 22 | +Controlled components are those where React controls the form data. In these components, form data is handled by the state within the component. |
| 23 | + |
| 24 | +**Example:** |
| 25 | + |
| 26 | +```jsx |
| 27 | +import React, { useState } from 'react'; |
| 28 | + |
| 29 | +const Form = () => { |
| 30 | + const [inputValue, setInputValue] = useState(''); |
| 31 | + |
| 32 | + const handleChange = (event) => { |
| 33 | + setInputValue(event.target.value); |
| 34 | + }; |
| 35 | + |
| 36 | + const handleSubmit = (event) => { |
| 37 | + event.preventDefault(); |
| 38 | + alert('A name was submitted: ' + inputValue); |
| 39 | + }; |
| 40 | + |
| 41 | + return ( |
| 42 | + <form onSubmit={handleSubmit}> |
| 43 | + <label> |
| 44 | + Name: |
| 45 | + <input type="text" value={inputValue} onChange={handleChange} /> |
| 46 | + </label> |
| 47 | + <button type="submit">Submit</button> |
| 48 | + </form> |
| 49 | + ); |
| 50 | +}; |
| 51 | +``` |
| 52 | + |
| 53 | +In this example, the form is controlled via state. Every state mutation will have an associated handler function. |
| 54 | + |
| 55 | +## Uncontrolled Components |
| 56 | + |
| 57 | +Uncontrolled components are those where form data is handled by the DOM itself. React does not control the state of the inputs. |
| 58 | + |
| 59 | +**Example:** |
| 60 | + |
| 61 | +```jsx |
| 62 | +import React, { useRef } from 'react'; |
| 63 | + |
| 64 | +const Form = () => { |
| 65 | + const inputRef = useRef(); |
| 66 | + |
| 67 | + const handleSubmit = (event) => { |
| 68 | + event.preventDefault(); |
| 69 | + alert('A name was submitted: ' + inputRef.current.value); |
| 70 | + }; |
| 71 | + |
| 72 | + return ( |
| 73 | + <form onSubmit={handleSubmit}> |
| 74 | + <label> |
| 75 | + Name: |
| 76 | + <input type="text" ref={inputRef} /> |
| 77 | + </label> |
| 78 | + <button type="submit">Submit</button> |
| 79 | + </form> |
| 80 | + ); |
| 81 | +}; |
| 82 | +``` |
| 83 | + |
| 84 | +This form uses `useRef` to access the DOM node directly, which is typical for uncontrolled components. |
| 85 | + |
| 86 | +## Using Formik |
| 87 | + |
| 88 | +Formik is a popular library to help manage form state, validation, and submission in React. |
| 89 | + |
| 90 | +**Example:** |
| 91 | + |
| 92 | +```jsx |
| 93 | +import React from 'react'; |
| 94 | +import { useFormik } from 'formik'; |
| 95 | + |
| 96 | +const Form = () => { |
| 97 | + const formik = useFormik({ |
| 98 | + initialValues: { |
| 99 | + name: '', |
| 100 | + }, |
| 101 | + onSubmit: values => { |
| 102 | + alert('A name was submitted: ' + values.name); |
| 103 | + }, |
| 104 | + }); |
| 105 | + |
| 106 | + return ( |
| 107 | + <form onSubmit={formik.handleSubmit}> |
| 108 | + <label> |
| 109 | + Name: |
| 110 | + <input |
| 111 | + type="text" |
| 112 | + name="name" |
| 113 | + onChange={formik.handleChange} |
| 114 | + value={formik.values.name} |
| 115 | + /> |
| 116 | + </label> |
| 117 | + <button type="submit">Submit</button> |
| 118 | + </form> |
| 119 | + ); |
| 120 | +}; |
| 121 | +``` |
| 122 | + |
| 123 | +Formik simplifies the form handling by taking care of the repetitive and complex parts of form state management and validation. |
| 124 | + |
| 125 | +## Validation Techniques |
| 126 | + |
| 127 | +Validating form input is crucial to maintaining data integrity. |
| 128 | + |
| 129 | +**Example using Formik with Yup:** |
| 130 | + |
| 131 | +```jsx |
| 132 | +import React from 'react'; |
| 133 | +import { useFormik } from 'formik'; |
| 134 | +import * as Yup from 'yup'; |
| 135 | + |
| 136 | +const validationSchema = Yup.object({ |
| 137 | + name: Yup.string() |
| 138 | + .required('Required') |
| 139 | + .min(2, 'Too Short!'), |
| 140 | +}); |
| 141 | + |
| 142 | +const Form = () => { |
| 143 | + const formik = useFormik({ |
| 144 | + initialValues: { |
| 145 | + name: '', |
| 146 | + }, |
| 147 | + validationSchema, |
| 148 | + onSubmit: values => { |
| 149 | + alert('Form Submitted'); |
| 150 | + }, |
| 151 | + }); |
| 152 | + |
| 153 | + return ( |
| 154 | + <form onSubmit={formik.handleSubmit}> |
| 155 | + <label> |
| 156 | + Name: |
| 157 | + <input |
| 158 | + type="text" |
| 159 | + name="name" |
| 160 | + onChange={formik.handleChange} |
| 161 | + onBlur={formik.handleBlur} |
| 162 | + value={formik.values.name} |
| 163 | + /> |
| 164 | + {formik.touched.name && formik.errors.name ? ( |
| 165 | + <div>{formik.errors.name}</div> |
| 166 | + ) : null} |
| 167 | + </label> |
| 168 | + <button type="submit">Submit</button> |
| 169 | + </form> |
| 170 | + ); |
| 171 | +}; |
| 172 | +``` |
| 173 | + |
| 174 | +This example integrates Yup for schema validation, providing error messages and form validation rules. |
| 175 | + |
| 176 | +## Best Practices |
| 177 | + |
| 178 | +- **Use Controlled Components for Predictable State**: Controlled components are easier to debug and integrate with complex UIs. |
| 179 | +- **Use Uncontrolled Components for Simplicity and Performance**: When you need simple forms without complex interactions. |
| 180 | +- **Leverage Libraries like Formik**: These libraries simplify form handling and validation. |
| 181 | +- **Always Validate User Input**: To ensure data integrity and user feedback. |
| 182 | + |
| 183 | +[EOF] |
| 184 | +``` |
0 commit comments