Scribd
Upload
8 views

React Forms

Uploaded by

Lakshya Pal
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
8 views

React Forms

Uploaded by

Lakshya Pal
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/ 6

React: Forms

Dr. Archana B Saxena, Professor,


Department of Information Technology,
[email protected], [email protected]
Web Forms
• Building Forms are very common in any web application
development. Unlike angular and angularJS, that gives form validation
out of the box, we have to handle forms ourself in React. That
includes complications like
• How to get form values.
• How to manage the form state.
• How to validate the form on the fly.
• How to show validation messages.
• In HTML, form elements such as <input>, <textarea>, and
<select> typically maintain their own state and update it based on
user input.
• In React, state of these input elements is typically kept in the state
property of components and only updated with setState().
Controlled Component & Uncontrolled component
• An input form element whose value is controlled by React in this way
is called a “controlled input or Controlled Component”.
• The alternative is uncontrolled inputs or components, where form
data is handled by the DOM itself. We will use ref to get the input
values and Perform Operations using this data.
• Though uncontrolled inputs are the simplest way to implement the
form inputs they are not powerful enough to build our real-world
applications.
• Now we will use Controlled Inputs and definitely we all will
understand the importance of them
Why React Forms?
• 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.
•
React: Forms
• An Input element state is maintained React through “State”.
• When state of input elements are controlled like this , we called it
controlled components.
• Un-controlled Inputs: when form is handled by Dom itself.
• Un controlled inputs are easiest way to handle form inputs but they
are not strong enough for
• Simple forms in React. Un_Form.js
• Manage Forms in React through States and events BlogFrm.js
/LoginFrm.js

You might also like