Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

Az űrlapokkal és űrlapelemekkel való munkavégzés a React-tal való fejlesztés során bonyolult lehet, mivel a HTML űrlapelemek némileg eltérően viselkednek a React-ban, mint a többi DOM-elem.

Ismerje meg, hogyan kell dolgozni az űrlapokkal és űrlapelemekkel, például jelölőnégyzetekkel, szövegterületekkel és egysoros szövegbevitellel.

Beviteli mezők kezelése az űrlapokban

A React alkalmazásban egy űrlap beviteli mezőjének kezelése gyakran egy állapot létrehozásával és a beviteli mezőhöz való kötésével valósul meg.

Például:

funkcióApp() {

const [firstName, setFirstName] = React.useState('');

funkcióhandleFirstNameChange(esemény) {
setFirstName( esemény.cél.érték )
}

Visszatérés (
<forma>
<bemenet típusa='szöveg' helyőrző='Keresztnév' onInput={handleFirstNameChange} />
</form>
)
}

Fent van egy keresztnév állam, an onInput esemény, és a fogantyúChange kezelő. A fogantyúChange funkció minden billentyűleütéskor fut a frissítéshez keresztnév állapot.

instagram viewer

Ez a megközelítés ideális lehet, ha egy beviteli mezővel dolgozunk, de különböző állapotokat, ill Az egyes bemeneti elemekhez tartozó kezelőfunkciók ismétlődővé válnak, ha több bemenettel dolgozunk mezőket.

Az ismétlődő és redundáns kód írásának elkerülése érdekében ilyen helyzetekben adjon minden beviteli mezőnek külön nevet, állítson be egy objektumot az űrlap kezdeti állapotértékeként, majd töltse ki az objektumot a bemenettel azonos nevű tulajdonságokkal mezőket.

Például:

funkcióApp() {

const [formData, setFormData] = React.useState(
{
keresztnév: '',
vezetéknév: ''
}
);

Visszatérés (
<forma>
<bemenet típusa='szöveg' helyőrző='Keresztnév' név='keresztnév' />
<bemenet típusa='szöveg' helyőrző='Vezetéknév' név='vezetéknév' />
</form>
)
}

A formData állapotváltozóként fog szolgálni az űrlapon belüli összes beviteli mező kezeléséhez és frissítéséhez. Győződjön meg arról, hogy az állapotobjektum tulajdonságainak neve megegyezik a bemeneti elemek nevével.

Az állapot frissítéséhez a bemeneti adatokkal, adjon hozzá egy onInput eseményfigyelőt a bemeneti elemhez, majd hívja meg a létrehozott kezelő függvényt.

Például:

funkcióApp() {

const [formData, setFormData] = React.useState(
{
keresztnév: '',
vezetéknév: ''
}
);

funkciófogantyúChange(esemény) {
setFormData( (prevState) => {
Visszatérés {
...prevState,
[esemény.célpont neve]: esemény.cél.érték
}
})
}

Visszatérés (
<forma>
<bemenet
típus='szöveg'
helyőrző='Keresztnév'
név='keresztnév'
onInput={handleChange}
/>
<bemenet
típus='szöveg'
helyőrző='Vezetéknév'
név='vezetéknév'
onInput={handleChange}
/>
</form>
)
}

A fenti kódblokk an onInput esemény és kezelő funkció, handleFirstNameChange. Ez handleFirstNameChange függvény hívásakor frissíti az állapottulajdonságokat. Az állapottulajdonságok értéke megegyezik a hozzájuk tartozó bemeneti elemekkel.

A bemenetek átalakítása ellenőrzött komponensekké

Amikor egy HTML-űrlapot elküld, az alapértelmezett viselkedése az, hogy a böngészőben egy új oldalra navigál. Ez a viselkedés bizonyos helyzetekben kényelmetlen, például amikor szeretné érvényesítse az űrlapon megadott adatokat. A legtöbb esetben megfelelőbbnek találja az űrlapon megadott információkhoz való hozzáférést biztosító JavaScript funkciót. Ez könnyen elérhető a React-ban ellenőrzött komponensek használatával.

Az index.html fájloknál az űrlapelemek nyomon követik állapotukat, és a felhasználó bevitele alapján módosítják azt. A React funkcióval a set state függvény módosítja az összetevő állapottulajdonságában tárolt dinamikus állapotot. A két állapotot kombinálhatja úgy, hogy a React állapotot az igazság egyetlen forrásává teszi. Így az űrlapot létrehozó komponens szabályozza, hogy mi történjen, amikor a felhasználó adatokat ad meg. A React vezérlőelemekkel rendelkező beviteli űrlapelemeket vezérelt összetevőknek vagy vezérelt bemeneteknek nevezzük.

A React alkalmazás vezérelt bemeneteinek használatához adjon hozzá egy értékprofilt a beviteli elemhez:

funkcióApp() {

const [formData, setFormData] = React.useState(
{
keresztnév: '',
vezetéknév: ''
}
);

funkciófogantyúChange(esemény) {
setFormData( (prevState) => {
Visszatérés {
...prevState,
[esemény.célpont neve]: esemény.cél.érték
}
})
}

Visszatérés (
<forma>
<bemenet
típus='szöveg'
helyőrző='Keresztnév'
név='keresztnév'
onInput={handleChange}
value={formData.firstName}
/>
<bemenet
típus='szöveg'
helyőrző='Vezetéknév'
név='vezetéknév'
onInput={handleChange}
value={formData.lastName}
/>
</form>
)
}

A bemeneti elemek érték attribútumai most a megfelelő állapottulajdonságok értékére vannak állítva. A bemenet értékét mindig az állapot határozza meg, ha vezérelt komponenst használunk.

A Textarea beviteli elem kezelése

A textarea elem olyan, mint bármely szokásos bemeneti elem, de többsoros bemeneteket tartalmaz. Hasznos olyan információk átadásakor, amelyek több mint egy sort igényelnek.

Egy index.html fájlban a textarea tag Az elem a gyermekei alapján határozza meg az értékét, amint az az alábbi kódblokkban látható:

<textarea>
Helló, hogy vagy?
</textarea>

A React segítségével a textarea elemet, akkor a típussal létrehozhat egy bemeneti elemet textarea.

Például így:

funkcióApp() {

Visszatérés (
<forma>
<bemenet típusa='textarea' név='üzenet'/>
</form>
)
}

A használat alternatívája textarea bemeneti típusként a textarea elem címkét a bemeneti típusú címke helyére, az alábbiak szerint:

funkcióApp() {

Visszatérés (
<forma>
<textarea
név='üzenet'
érték='Helló, hogy vagy?'
/>
</form>
)
}

A textarea a címkének van egy érték attribútuma, amely a felhasználó adatait tartalmazza textarea elem. Ezáltal úgy működik, mint egy alapértelmezett React bemeneti elem.

Munka a React jelölőnégyzetének beviteli elemével

A dolgok egy kicsit másképp működnek, ha dolgozol vele jelölőnégyzetet bemenetek. A típus beviteli mezője jelölőnégyzetet nem rendelkezik érték attribútummal. Azonban van benne a ellenőrizve tulajdonság. Ez ellenőrizve Az attribútum abban különbözik a value attribútumtól, hogy logikai értéket igényel annak meghatározásához, hogy a négyzet be van-e jelölve vagy nincs bejelölve.

Például:

funkcióApp() {

Visszatérés (
<forma>
<bemenet típusa='jelölőnégyzetet' id='csatlakozás' név='csatlakozik' />
<címke htmlFor='csatlakozás'>Szeretnél csatlakozni a csapatunkhoz?</label>
</form>
)
}

A címke elem a bemeneti elem azonosítójára hivatkozik a htmlFor tulajdonság. Ez htmlFor Az attribútum a bemeneti elem azonosítóját veszi fel – ebben az esetben csatlakozás. Amikor HTML űrlap létrehozása, a htmlFor attribútum képviseli a számára tulajdonság.

A jelölőnégyzetet jobban használható vezérelt bemenetként. Ezt úgy érheti el, hogy létrehoz egy állapotot, és hozzárendeli a kezdeti igaz vagy hamis logikai értékét.

Két kelléket kell tartalmaznia a jelölőnégyzetet bemeneti elem: a ellenőrizve ingatlan és egy onChange esemény egy kezelőfüggvénnyel, amely meghatározza az állapot értékét a setIsChecked() funkció.

Például:

funkcióApp() {

const [isChecked, setIsChecked] = React.useState(hamis);

funkciófogantyúChange() {
setIsChecked( (prevState) => !prevState )
}

Visszatérés (
<forma>
<bemenet
típus='jelölőnégyzetet'
id='csatlakozás'
név='csatlakozik'
checked={isChecked}
onChange={handleChange}
/>
<címke htmlFor='csatlakozás'>Szeretnél csatlakozni a csapatunkhoz?</label>
</form>
)
}

Ez a kódblokk generál egy Ellenőrizve állapotot, és a kezdeti értékét erre állítja be hamis. Beállítja az értékét Ellenőrizve hoz ellenőrizve attribútum a bemeneti elemben. A fogantyúChange funkció aktiválódik, és megváltoztatja az állapot értékét Ellenőrizve az ellenkezőjére, amikor rákattint a jelölőnégyzetre.

Egy űrlapelem valószínűleg több különböző típusú beviteli elemet tartalmazhat, például jelölőnégyzeteket, szöveget stb.

Ilyen esetekben hasonló módon kezelheti őket, mint ahogy több azonos típusú bemeneti elemet kezelt.

Íme egy példa:

funkcióApp() {

hagyja[formData, setFormData] = React.useState(
{
keresztnév: ''
csatlakozik: igaz,
}
);

funkciófogantyúChange(esemény) {

const {név, érték, típus, ellenőrzött} = esemény.cél;

setFormData( (prevState) => {
Visszatérés {
...prevState,
[név]: típus jelölőnégyzet? ellenőrizve: érték
}
})
}

Visszatérés (
<forma>
<bemenet
típus='szöveg'
helyőrző='Keresztnév'
név='keresztnév'
onInput={handleChange}
value={formData.firstName}
/>
<bemenet
típus='jelölőnégyzetet'
id='csatlakozás'
név='csatlakozik'
checked={formData.join}
onChange={handleChange}
/>
<címke htmlFor='csatlakozás'>Szeretnél csatlakozni a csapatunkhoz?</label>
</form>
)
}

Vegye figyelembe, hogy a fogantyúChange funkció, setFormData hármas operátort használ a érték hozzárendeléséhez ellenőrizve tulajdonság az állapottulajdonságokra, ha a cél bemenet típusa a jelölőnégyzetet. Ha nem, akkor hozzárendeli az értékeit érték tulajdonság.

Most már kezelheti a reakcióűrlapokat

Itt megtanulta, hogyan kell űrlapokkal dolgozni a React alkalmazásban különböző űrlapbeviteli elemek használatával. Azt is megtanulta, hogyan alkalmazhat vezérelt bemeneteket az űrlapelemekre úgy, hogy a jelölőnégyzetekkel végzett munka során értéktámaszt vagy bejelölt propot ad hozzá.

A React űrlap beviteli elemeinek hatékony kezelése javítja a React alkalmazás teljesítményét, ami jobb, mindenre kiterjedő felhasználói élményt eredményez.