Scribd
Upload
9 views12 pages

Slide 5 - Reactjs - Form

This document explains how to create and manage forms in React, emphasizing the use of component state and the useState Hook for handling form data. It covers topics such as controlling input fields, managing multiple inputs, and form validation using libraries like Formik and React Hook Form. Additionally, it addresses file uploads and binding existing data to forms, as well as submitting form data to a backend API.

Uploaded by

huudatnguyen1007
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
9 views12 pages

Slide 5 - Reactjs - Form

This document explains how to create and manage forms in React, emphasizing the use of component state and the useState Hook for handling form data. It covers topics such as controlling input fields, managing multiple inputs, and form validation using libraries like Formik and React Hook Form. Additionally, it addresses file uploads and binding existing data to forms, as well as submitting form data to a backend API.

Uploaded by

huudatnguyen1007
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 12

React - Form

How to add a form


You add a form with React like any other
element:
Handling form data
Handling forms is about how you handle the data when it changes value or gets submitted.

In HTML, form data is usually handled by the DOM.

In React, form data is usually handled by the components.

When the data is handled by the components, all the data is stored in the component state.

You can control changes by adding event handlers in the onChange attribute.

We can use the useState Hook to keep track of each inputs value and provide a "single source
of truth" for the entire application.
Control components
● The form elements are controlled via
React state.

● React handles the value of the input


fields via the useState hook.
Handling Multiple Inputs
For forms with multiple fields,
use an object in state:
Use checked attribute to set the value
Handling Checkboxes
Use onChange event when check/uncheck
Handling Radio Buttons
Handling Select Dropdowns
Form validation
- You can use Html attributes:
https://www.w3schools.com/TAGs/ref_attributes.asp

- Formik : https://formik.org/

- React Hook Form: https://react-hook-form.com


Handling File Uploads
Uploading images, documents, etc.
Binding existing data to a form
Use value attribute for input with type :textbox, email, select

Use checked attribute for input with type :radio,checkbox


Form Submission & API Calls
If you need to send form data to a backend:

You might also like