Scribd
Upload
52 views

Unit 3

The document discusses using forms with React components. Forms can be controlled or uncontrolled. Controlled forms manage state within the component, while uncontrolled forms manage state externally. The document provides an example of adding a submit handler to a controlled form in React.

Uploaded by

Rishi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
52 views

Unit 3

The document discusses using forms with React components. Forms can be controlled or uncontrolled. Controlled forms manage state within the component, while uncontrolled forms manage state externally. The document provides an example of adding a submit handler to a controlled form in React.

Uploaded by

Rishi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

AID UNIT- 3

Fosms:

USes fos ns to USe to coith


+he cweb Page
Pct of cm 1 mode5n web cirplicution.
I+ +the oith +he urplicuton
infosmetion from t he ySeoS,
I+
Contuin tex + ields, but tom 9, checs box, oudio buton,
tt .

’ Co mponent5 Cun be 4ew0 tpes:


1) ContO1|ed 2) Un Conto0l1ed

1) Conto ed Cormpo nem S:


ohich fosn's dutu is hemdied by the ComPontnt's
5tote .
I+ tces Cyo3emt Vulue +hoough PoPS
Chemg es thooug h CulbutKS lise OnllilK, onchunge
Fecttyscs:’ Mimag e d by Reuc Stu+e

CompO nen+ uPdate ste te on

eeisies to debig
Less Complex Cede

-> ConSi dee d bes t Poictice.


9> UnComt Do 1ed ComPonemt S:

This imput Similur t0 the tovdition HIML f6m s


The DOM itself hemdies the Poy Date4.
-> feet es: ’ Mam9g ed by Com ponent's integnu) Steite
-) (ormponen t |ntes n Stut e 0n

difficu+ to de bug
MOTe Co mple x Code
Consi de ed 1 4 e n u te
7 Hamd ling Fo ns:
T+ cbout hoco yoy hemdie the du tel cohen it
chnges Vu)ye Submjtted.
Reu+ fosm dotu uSuciliy hemde by the
Com Pom emt5

whem the detc is handled by the Com Ponem 4S,


C) +he deot Comp0n em tS Stete.

Cotoo| chomges by idding event hemdieS


on Chemge C44i bute.

use Stuie 4 fuom 'oeuct'


Reue t DOM fors ec4 -dom | clien+

Cons + yseS tute c"")

Poon)
Zlubel> Entt Yoyo nune :
ty Pe "tex+" vulue nume
on Chunge = (e) => SetNume (e: turgt.veluc )h

e1fon

(ons+ d00t= Relc+ DO M. (oeetcRoot (documemt. get Elernent B,Je


c'o0ot'))
Adding A 5ubmit+ting Fortns in Reuct:
oy Cidded C foam ith Reuct iKe cn4 otheY
Clem emt

Ex
Ranetion myfogm o

21e be |> Emters Yous Neirne:


type= "+er+!!
chube
4
Const OOt = Reat+ DOM. C eote Roo+ Cdo(umemt-AeA Eiementhyt
('00t'))
-) This coi)
mosml, +he fos Submí+
Pug e Tefsesh
Submitti: Add c Sybmi+ button
heimdier |m the On Sub mit
even+
a+tibute.
inPost ysey Stete 3
ReoctDoM RoomPoom'dcuct;
dCuct dom jcliemt':
finction nyfosnto
Congt (ncAme,se+ Hune J = use Sttute
C" "):
Cong t hende Submnit = (eAiemt) =>
event Psevent Defoul+ c)
Clest(The n n e

efom OmSubmit hend le Submit)


<inpu t t4Pe="4ex 4!!
On chunq e (e) =>
Se4Neime (e.
tiget.vlue) ) )

You might also like