Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Práce s formuláři a prvky formuláře při vývoji pomocí Reactu může být složitá, protože prvky formuláře HTML se v Reactu chovají poněkud odlišně než ostatní prvky DOM.

Naučte se pracovat s formuláři a prvky formuláře, jako jsou zaškrtávací políčka, textové oblasti a jednořádkové textové vstupy.

Správa vstupních polí ve formulářích

V Reactu se správa vstupního pole ve formuláři často provádí vytvořením stavu a jeho vazbou na vstupní pole.

Například:

funkceAplikace() {

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

funkcehandleFirstNameChange(událost) {
setFirstName( událost.cílová.hodnota )
}

vrátit se (
<formulář>
<typ vstupu ='text' zástupný symbol='Jméno' onInput={handleFirstNameChange} />
</form>
)
}

Nahoře máme a jméno stát, an onInput událost, a rukojeťZměnit psovod. The rukojeťZměnit funkce běží při každém stisknutí klávesy pro aktualizaci jméno Stát.

instagram viewer

Tento přístup může být ideální při práci s jedním vstupním polem, ale vytváření různých stavů a funkce handleru pro každý vstupní prvek by se při práci s více vstupy opakovaly pole.

Abyste se v takových situacích vyhnuli psaní opakujícího se a nadbytečného kódu, dejte každému vstupnímu poli odlišný název a nastavte objekt jako počáteční hodnotu stavu vašeho formuláře a poté vyplňte objekt vlastnostmi se stejnými názvy jako vstup pole.

Například:

funkceAplikace() {

konst [formData, setFormData] = React.useState(
{
jméno: '',
příjmení: ''
}
);

vrátit se (
<formulář>
<typ vstupu ='text' zástupný symbol='Jméno' jméno='jméno' />
<typ vstupu ='text' zástupný symbol='Příjmení' jméno='příjmení' />
</form>
)
}

The formData bude sloužit jako stavová proměnná pro správu a aktualizaci všech vstupních polí uvnitř formuláře. Ujistěte se, že názvy vlastností v objektu stavu jsou totožné s názvy vstupních prvků.

Chcete-li aktualizovat stav pomocí vstupních dat, přidejte příponu onInput posluchače událostí na vstupní prvek a poté zavolejte vytvořenou funkci handleru.

Například:

funkceAplikace() {

konst [formData, setFormData] = React.useState(
{
jméno: '',
příjmení: ''
}
);

funkcerukojeťZměnit(událost) {
setFormData( (prevState) => {
vrátit se {
...prevState,
[event.target.name]: událost.cílová.hodnota
}
})
}

vrátit se (
<formulář>
<vstup
typ='text'
zástupný symbol='Jméno'
jméno='jméno'
onInput={handleChange}
/>
<vstup
typ='text'
zástupný symbol='Příjmení'
jméno='příjmení'
onInput={handleChange}
/>
</form>
)
}

Výše uvedený blok kódu používá an onInput událost a funkce handleru, handleFirstNameChange. Tento handleFirstNameChange funkce při volání aktualizuje vlastnosti stavu. Hodnoty vlastností stavu budou stejné jako hodnoty jejich odpovídajících vstupních prvků.

Převod vašich vstupů na řízené komponenty

Když se formulář HTML odešle, jeho výchozí chování je přejít na novou stránku v prohlížeči. Toto chování je v některých situacích nepohodlné, například když chcete ověřit data zadaná do formuláře. Ve většině případů vám bude více vyhovovat JavaScriptová funkce s přístupem k informacím zadaným do formuláře. Toho lze v Reactu snadno dosáhnout pomocí řízených komponent.

U souborů index.html si prvky formuláře uchovávají přehled o svém stavu a upravují jej v reakci na vstup uživatele. Pomocí funkce React upravuje funkce set state dynamický stav uložený ve vlastnosti state komponenty. Tyto dva stavy můžete zkombinovat tak, že učiníte stav React jediným zdrojem pravdy. Tímto způsobem komponenta, která vytváří formulář, řídí, co se stane, když uživatel zadá data. Prvky vstupního formuláře s hodnotami, které React řídí, se nazývají řízené komponenty nebo řízené vstupy.

Chcete-li využívat řízené vstupy ve vaší aplikaci React, přidejte do vstupního prvku hodnotu prop:

funkceAplikace() {

konst [formData, setFormData] = React.useState(
{
jméno: '',
příjmení: ''
}
);

funkcerukojeťZměnit(událost) {
setFormData( (prevState) => {
vrátit se {
...prevState,
[event.target.name]: událost.cílová.hodnota
}
})
}

vrátit se (
<formulář>
<vstup
typ='text'
zástupný symbol='Jméno'
jméno='jméno'
onInput={handleChange}
value={formData.firstName}
/>
<vstup
typ='text'
zástupný symbol='Příjmení'
jméno='příjmení'
onInput={handleChange}
value={formData.lastName}
/>
</form>
)
}

Hodnotové atributy vstupních prvků jsou nyní nastaveny na hodnotu odpovídajících vlastností stavu. Hodnota příkonu je vždy určena stavem při použití řízené součástky.

Práce se vstupním prvkem Textarea

The textarea prvek je jako každý běžný vstupní prvek, ale obsahuje víceřádkové vstupy. Je to užitečné při předávání informací, které vyžadují více než jeden řádek.

V souboru index.html je soubor tag textarea prvek určuje svou hodnotu svými potomky, jak je vidět v bloku kódu níže:

<textarea>
Ahoj, jak se máš?
</textarea>

S Reactem můžete použít textarea element, můžete vytvořit vstupní element s typem textarea.

Jako tak:

funkceAplikace() {

vrátit se (
<formulář>
<typ vstupu ='textarea' jméno='zpráva'/>
</form>
)
}

Alternativa k použití textarea jako vstupní typ je použít textarea tag element místo tagu typu vstupu, jak je vidět níže:

funkceAplikace() {

vrátit se (
<formulář>
<textarea
jméno='zpráva'
hodnota='Ahoj, jak se máš?'
/>
</form>
)
}

The textarea tag má atribut value, který obsahuje informace o uživateli zadané do textarea živel. Díky tomu funguje jako výchozí vstupní prvek React.

Práce se vstupním prvkem zaškrtávacího pole React

Při práci se věci mají trochu jinak zaškrtávací políčko vstupy. Vstupní pole typu zaškrtávací políčko nemá atribut value. Má však a kontrolovány atribut. Tento kontrolovány atribut se liší od atributu value tím, že vyžaduje booleovskou hodnotu k určení, zda je políčko zaškrtnuté nebo nezaškrtnuté.

Například:

funkceAplikace() {

vrátit se (
<formulář>
<typ vstupu ='zaškrtávací políčko' id='spojování' jméno='připojit' />
<label htmlFor='spojování'>Chtěli byste se přidat k našemu týmu?</label>
</form>
)
}

Element label odkazuje na ID vstupního prvku pomocí htmlFor atribut. Tento htmlFor atribut přebírá ID vstupního prvku – v tomto případě spojování. Když vytvoření HTML formuláře, htmlFor atribut představuje pro atribut.

The zaškrtávací políčko se lépe používá jako řízený vstup. Můžete toho dosáhnout vytvořením stavu a přiřazením počáteční booleovské hodnoty true nebo false.

Měli byste na něj zahrnout dvě rekvizity zaškrtávací políčko vstupní prvek: a kontrolovány majetek a při změně událost s funkcí handleru, která určí hodnotu stavu pomocí setIsChecked() funkce.

Například:

funkceAplikace() {

konst [isChecked, setIsChecked] = React.useState(Nepravdivé);

funkcerukojeťZměnit() {
setIsChecked( (prevState) => !prevState)
}

vrátit se (
<formulář>
<vstup
typ='zaškrtávací políčko'
id='spojování'
jméno='připojit'
zaškrtnuto={isChecked}
onChange={handleChange}
/>
<label htmlFor='spojování'>Chtěli byste se přidat k našemu týmu?</label>
</form>
)
}

Tento blok kódu generuje je zaškrtnuto stavu a nastaví jeho počáteční hodnotu na Nepravdivé. Nastavuje hodnotu je zaškrtnuto k kontrolovány atribut ve vstupním prvku. The rukojeťZměnit funkce se spustí a změní hodnotu stavu je zaškrtnuto na jeho opak, kdykoli kliknete na zaškrtávací políčko.

Prvek formuláře může pravděpodobně obsahovat více vstupních prvků různých typů, jako jsou zaškrtávací políčka, text atd.

V takových případech s nimi můžete zacházet podobně, jako jste zacházeli s více vstupními prvky stejného typu.

Zde je příklad:

funkceAplikace() {

nechat[formData, setFormData] = React.useState(
{
jméno: ''
připojit se: skutečný,
}
);

funkcerukojeťZměnit(událost) {

konst {jméno, hodnota, typ, zaškrtnuto} = event.target;

setFormData( (prevState) => {
vrátit se {
...prevState,
[název]: typ zaškrtávací políčko? zaškrtnuto: hodnota
}
})
}

vrátit se (
<formulář>
<vstup
typ='text'
zástupný symbol='Jméno'
jméno='jméno'
onInput={handleChange}
value={formData.firstName}
/>
<vstup
typ='zaškrtávací políčko'
id='spojování'
jméno='připojit'
checked={formData.join}
onChange={handleChange}
/>
<label htmlFor='spojování'>Chtěli byste se přidat k našemu týmu?</label>
</form>
)
}

Všimněte si, že v rukojeťZměnit funkce, setFormData používá ternární operátor k přiřazení hodnoty kontrolovány vlastnost na vlastnosti stavu, pokud je typ cílového vstupu a zaškrtávací políčko. Pokud ne, přiřadí hodnoty hodnota atribut.

Nyní můžete zpracovávat formuláře React

Naučili jste se zde pracovat s formuláři v Reactu pomocí různých vstupních prvků formuláře. Také jste se naučili, jak aplikovat řízené vstupy na prvky formuláře přidáním hodnotové podpěry nebo zaškrtnuté podpěry při práci se zaškrtávacími políčky.

Efektivní manipulace se vstupními prvky formuláře React zlepší výkon vaší aplikace React, což povede k lepšímu všestrannému uživatelskému zážitku.