Darbas su formomis ir formos elementais kuriant naudojant React gali būti sudėtingas, nes HTML formos elementai React veikia šiek tiek kitaip nei kiti DOM elementai.
Sužinokite, kaip dirbti su formomis ir formos elementais, pvz., žymimaisiais laukeliais, teksto sritimis ir vienos eilutės teksto įvestimis.
Įvesties laukų tvarkymas formose
React formoje įvesties laukas dažnai tvarkomas sukuriant būseną ir susiejant ją su įvesties lauku.
Pavyzdžiui:
funkcijaProgramėlė() {const [firstName, setFirstName] = React.useState('');
funkcijahandFirstNameChange(įvykis) {
setFirstName( įvykis.taikinys.vertė )
}
grąžinti (
<forma>
<įvesties tipas ='tekstą' vietos rezervuaras='Pirmas vardas' onInput={handleFirstNameChange} />
</form>
)
}
Aukščiau turime a Pirmas vardas valstybė, an onInput renginys ir a rankenaKeisti prižiūrėtojas. The rankenaKeisti funkcija veikia kiekvieną kartą paspaudus klavišą, kad būtų atnaujinta Pirmas vardas valstybė.
Šis metodas gali būti idealus dirbant su vienu įvesties lauku, bet kuriant skirtingas būsenas ir kiekvieno įvesties elemento tvarkyklės funkcijos pasikartotų dirbant su keliomis įvestimis laukai.
Kad tokiose situacijose nebūtų rašomas pasikartojantis ir perteklinis kodas, kiekvienam įvesties laukui suteikite atskirą pavadinimą, nustatykite objektą kaip pradinę formos būsenos reikšmę, tada užpildykite objektą ypatybėmis tais pačiais pavadinimais kaip ir įvestis laukai.
Pavyzdžiui:
funkcijaProgramėlė() {konst [formData, setFormData] = React.useState(
{
Pirmas vardas: '',
pavardė: ''
}
);
grąžinti (
<forma>
<įvesties tipas ='tekstą' vietos rezervuaras='Pirmas vardas' vardas ='Pirmas vardas' />
<įvesties tipas ='tekstą' vietos rezervuaras='Pavardė' vardas ='pavardė' />
</form>
)
}
The formData bus naudojamas kaip būsenos kintamasis, skirtas valdyti ir atnaujinti visus formos įvesties laukus. Įsitikinkite, kad būsenos objekto ypatybių pavadinimai yra identiški įvesties elementų pavadinimams.
Norėdami atnaujinti būseną įvesties duomenimis, pridėkite an onInput įvykių klausytoją į įvesties elementą, tada iškvieskite sukurtą tvarkyklės funkciją.
Pavyzdžiui:
funkcijaProgramėlė() {konst [formData, setFormData] = React.useState(
{
Pirmas vardas: '',
pavardė: ''
}
);
funkcijarankenaKeisti(įvykis) {
setFormData( (prevState) => {
grąžinti {
...prevState,
[įvykis.target.name]: įvykis.taikinys.vertė
}
})
}
grąžinti (
<forma>
<įvestis
tipas ='tekstą'
vietos rezervuaras='Pirmas vardas'
vardas ='Pirmas vardas'
onInput={handleChange}
/>
<įvestis
tipas ='tekstą'
vietos rezervuaras='Pavardė'
vardas ='pavardė'
onInput={handleChange}
/>
</form>
)
}
Aukščiau pateiktame kodo bloke buvo naudojamas an onInput įvykis ir prižiūrėtojo funkcija, handFirstNameChange. Tai handFirstNameChange funkcija atnaujins būsenos ypatybes, kai bus iškviesta. Būsenos ypatybių reikšmės bus tokios pat kaip ir atitinkamų įvesties elementų.
Įvesties keitimas į valdomus komponentus
Kai pateikiama HTML forma, jos numatytoji elgsena yra naršyti į naują puslapį naršyklėje. Toks elgesys yra nepatogus kai kuriose situacijose, pavyzdžiui, kai to norite patvirtinti į formą įvestus duomenis. Daugeliu atvejų jums labiau tinka JavaScript funkcija su prieiga prie formoje įvestos informacijos. Tai galima lengvai pasiekti React naudojant kontroliuojamus komponentus.
Naudodami index.html failus formos elementai išsaugo savo būseną ir modifikuoja ją reaguodami į vartotojo įvestį. Naudojant React, nustatytos būsenos funkcija modifikuoja dinaminę būseną, saugomą komponento būsenos savybėje. Galite sujungti šias dvi būsenas, padarydami „React“ būseną vieninteliu tiesos šaltiniu. Tokiu būdu komponentas, kuris sukuria formą, valdo, kas nutinka, kai vartotojas įveda duomenis. Įvesties formos elementai su reikšmėmis, kurias valdo „React“, vadinami valdomais komponentais arba valdomais įvestis.
Jei norite naudoti kontroliuojamas įvestis programoje „React“, prie įvesties elemento pridėkite vertės rekvizitus:
funkcijaProgramėlė() {konst [formData, setFormData] = React.useState(
{
Pirmas vardas: '',
pavardė: ''
}
);
funkcijarankenaKeisti(įvykis) {
setFormData( (prevState) => {
grąžinti {
...prevState,
[įvykis.target.name]: įvykis.taikinys.vertė
}
})
}
grąžinti (
<forma>
<įvestis
tipas ='tekstą'
vietos rezervuaras='Pirmas vardas'
vardas ='Pirmas vardas'
onInput={handleChange}
value={formData.firstName}
/>
<įvestis
tipas ='tekstą'
vietos rezervuaras='Pavardė'
vardas ='pavardė'
onInput={handleChange}
value={formData.lastName}
/>
</form>
)
}
Įvesties elementų vertės atributai dabar nustatyti kaip atitinkamų būsenų ypatybių reikšmė. Kai naudojamas valdomas komponentas, įvesties reikšmę visada lemia būsena.
„Textrea“ įvesties elemento tvarkymas
The teksto sritis elementas yra kaip bet kuris įprastas įvesties elementas, tačiau turi kelių eilučių įvestis. Tai naudinga perduodant informaciją, kuriai reikia daugiau nei vienos eilutės.
Index.html faile tekstinės srities žyma elementas nustato jo vertę pagal savo vaikus, kaip matyti toliau pateiktame kodo bloke:
<teksto sritis>
Labas, kaip tau sekasi?
</textarea>
Su React, norėdami naudoti teksto sritis elementą, galite sukurti įvesties elementą naudodami tipą teksto sritis.
Kaip taip:
funkcijaProgramėlė() {grąžinti (
<forma>
<įvesties tipas ='teksto sritis' vardas ='žinutę'/>
</form>
)
}
Alternatyva naudojimui teksto sritis kaip įvesties tipą reikia naudoti teksto sritis elemento žyma vietoje įvesties tipo žymos, kaip parodyta toliau:
funkcijaProgramėlė() {grąžinti (
<forma>
<teksto sritis
vardas ='žinutę'
vertė ='Labas, kaip tau sekasi?'
/>
</form>
)
}
The teksto sritis žyma turi vertės atributą, kuriame saugoma įvesta vartotojo informacija teksto sritis elementas. Dėl to jis veikia kaip numatytasis „React“ įvesties elementas.
Darbas su „React“ žymės langelio įvesties elementu
Dirbant viskas yra šiek tiek kitaip žymimasis langelis įėjimai. Tipo įvesties laukas žymimasis langelis neturi reikšmės atributo. Tačiau jis turi a patikrinta atributas. Tai patikrinta atributas skiriasi nuo vertės atributo tuo, kad norint nustatyti, ar langelis pažymėtas, ar nepažymėtas, reikalinga loginė reikšmė.
Pavyzdžiui:
funkcijaProgramėlė() {grąžinti (
<forma>
<įvesties tipas ='žymimasis langelis' id='prisijungimas' vardas ='prisijungti' />
<etiketė htmlFor='prisijungimas'>Ar norėtum prisijungti prie mūsų komandos?</label>
</form>
)
}
Etiketės elementas nurodo įvesties elemento ID naudojant html Už atributas. Tai html Už atributas paima įvesties elemento ID – šiuo atveju prisijungimas. Kada HTML formos kūrimas, html Už atributas reiškia dėl atributas.
The žymimasis langelis geriau naudoti kaip kontroliuojamą įvestį. Tai galite pasiekti sukūrę būseną ir priskirdami jai pradinę loginę reikšmę tiesa arba klaidinga.
Turėtumėte įtraukti du rekvizitus žymimasis langelis įvesties elementas: a patikrinta turtas ir an onChange įvykis su tvarkyklės funkcija, kuri nustatys būsenos vertę naudodama setIschecked() funkcija.
Pavyzdžiui:
funkcijaProgramėlė() {konst [isChecked, setIsChecked] = React.useState(klaidinga);
funkcijarankenaKeisti() {
setIsChecked((prevState) => !prevState )
}
grąžinti (
<forma>
<įvestis
tipas ='žymimasis langelis'
id='prisijungimas'
vardas ='prisijungti'
checked={isChecked}
onChange={handleChange}
/>
<etiketė htmlFor='prisijungimas'>Ar norėtum prisijungti prie mūsų komandos?</label>
</form>
)
}
Šis kodo blokas generuoja yra Patikrinta būseną ir nustato pradinę reikšmę klaidinga. Ji nustato vertę yra Patikrinta prie patikrinta atributas įvesties elemente. The rankenaKeisti funkcija įsijungs ir pakeis būsenos reikšmę yra Patikrinta į priešingą, kai spustelėsite žymimąjį laukelį.
Tikėtina, kad formos elemente gali būti keli skirtingų tipų įvesties elementai, pvz., žymimieji laukeliai, tekstas ir kt.
Tokiais atvejais galite juos tvarkyti panašiai, kaip tvarkėte kelis to paties tipo įvesties elementus.
Štai pavyzdys:
funkcijaProgramėlė() {leisti[formData, setFormData] = React.useState(
{
Pirmas vardas: ''
prisijungti: tiesa,
}
);
funkcijarankenaKeisti(įvykis) {
konst {vardas, reikšmė, tipas, pažymėta} = event.target;
setFormData( (prevState) => {
grąžinti {
...prevState,
[vardas]: tipo žymimasis langelis? patikrinta: vertė
}
})
}
grąžinti (
<forma>
<įvestis
tipas ='tekstą'
vietos rezervuaras='Pirmas vardas'
vardas ='Pirmas vardas'
onInput={handleChange}
value={formData.firstName}
/>
<įvestis
tipas ='žymimasis langelis'
id='prisijungimas'
vardas ='prisijungti'
checked={formData.join}
onChange={handleChange}
/>
<etiketė htmlFor='prisijungimas'>Ar norėtum prisijungti prie mūsų komandos?</label>
</form>
)
}
Atkreipkite dėmesį, kad rankenaKeisti funkcija, setFormData naudoja trejinį operatorių, kad priskirtų vertę patikrinta ypatybę į būsenos ypatybes, jei tikslinis įvesties tipas yra a žymimasis langelis. Jei ne, jis priskiria reikšmes vertė atributas.
Dabar galite tvarkyti reakcijos formas
Čia išmokote dirbti su formomis React naudojant skirtingus formos įvesties elementus. Taip pat sužinojote, kaip savo formos elementams taikyti valdomus įvestis, kai dirbate su žymimaisiais laukeliais, pridedant vertės atramą arba pažymėtą rekvizitą.
Veiksmingas „React“ formos įvesties elementų tvarkymas pagerins jūsų „React“ programos našumą, todėl naudotojams bus teikiama geresnė visapusiška patirtis.