logo

Jak vytvořit formulář React pomocí obslužné rutiny události jedné změny?

Formulář HTML umožňuje uživatelům zadávat data pomocí vstupních polí, která přijímají text, heslo, e-mail, číslo, barvu, telefonní číslo, datum atd. Uživatelé mohou do textové oblasti psát dlouhé texty, mohou vybrat jednu nebo více položek z pole pro výběr, můžete zaškrtnout nebo zrušit zaškrtnutí položek pomocí zaškrtávacího políčka nebo vybrat jednu z mnoha možností pomocí přepínače. Jakmile jsou všechny vstupy shromážděny, formulář jej může odeslat k dalšímu zpracování pomocí tlačítka Odeslat.

Zde je příklad toho, jak může vypadat formulář HTML s prvky

Každý z prvků formuláře (<input> , <textarea> , <select> , atd.) může reagovat na události DOM. Tyto události nastanou, když dojde k určité akci. Například onchange událost nastane, když byla změněna hodnota prvku. My jako weboví vývojáři nasloucháme těmto změnám, abychom získali nejaktuálnější hodnoty z prvků přidružením funkce. Tato funkce nebude provedena, dokud k události dojde.

V níže uvedeném příkladu máme handleChange funkce, která bude provedena, když se změní hodnota vstupního textového pole.

<html>
  <body>
    <input type="text" 
            name="uname" 
            placeholder="Enter Username" 
            onchange="handleChange(this.value)">

    <script>
      function handleChange(val) {
        console.log(`The value is ${val}`);
      }
    </script>
  </body>
</html>

Formulář HTML může mít obvykle více než jeden prvek. Některé formy (jako ta, kterou jsme viděli výše) mohou mít mnoho. Přiřazení různých onchange Funkce obslužné rutiny události s každým z prvků k získání aktualizované hodnoty může mít za následek příliš mnoho kódu na údržbu. V tomto článku uvidíme, jak to zvládnout pomocí jedné funkce pro více vstupních polí ve formuláři React.

Formulář reakce

Elementy formuláře HTML si zachovávají svůj vlastní stav. V Reactu je proměnlivý stav udržován pomocí state vlastnost součásti. Jakákoli aktualizace této vlastnosti stavu je možná pouze pomocí setState() metoda. Vestavěný reakční hák, useState() ještě více usnadňuje správu.

Dobrou programátorskou praxí je považovat stav React za „jediný zdroj pravdy“. Komponenta React s formulářem by měla zvládnout vše, co se stane s formulářem, když se změní vstupní hodnota.

Zpracování událostí změn více řízených komponent

Běžným trikem při manipulaci se změnami hodnot více řízených komponent je přidání name atribut ke každému z prvků. Funkce handleru může používat event.target.name k udržení stavů. Pojďme to pochopit pomocí příkladů.

Předpokládejme, že máme formulář s následujícími prvky pro zachycení uživatelských vstupů,

Pole Typ
celé jméno <input type='text'>
e-mail <input type='email'>
heslo <input type='password'>
adresa <textarea>
barva <input type='color'>
město <input type='text'>
stav <select>
zip <input type='number'>
checkMe <checkbox>

1. Vytvořte stav jako objekt

Inicializujte stav s výchozími hodnotami.

const [state, setState] = useState({
    fullName: "",
    email: "",
    password: "",
    address: "",
    color: "",
    city: "",
    state: "",
    zip: 0,
    checkMe: false
  })

2. Přidejte name atribut k prvkům

Přidejte name atribut ke všem prvkům formuláře. Tato hodnota atributu názvu by měla být stejná jako klíč definovaný při inicializaci stavu. Zde je několik příkladů.

Textové pole

<input type="text" 
       name="fullName" 
       value={ state.fullName } 
       onChange={ handleChange } />

E-mail

<input type="email" 
       name="email" 
       value={ state.email } 
       onChange={ handleChange } />

Barva

<input type="color" 
       name="color" 
       value={ state.color } 
       onChange={ handleChange } />

Vybrat

<select name="state" 
       onChange={ handleChange } value={ state.state }>
       <option ...>...</option>
       .....
</select>

Zaškrtávací políčko

<input type="checkbox" 
       name="checkMe" 
       checked={ state.checkMe } 
       onChange={ handleChange } />

3. Definujte handler funkce

Poslední je definovat funkci handleru, handleChange změnit stav komponenty.

const handleChange = evt => {
    const name = evt.target.name;
    const value =
    evt.target.type === "checkbox" ? evt.target.checked : evt.target.value;
    setState({
      ...state,
      [name]: value
    })
  }

Všimněte si, že název prvku získáme pomocí evt.target.name . Hodnotu lze zjistit pomocí vlastnosti evt.target.value . Jako máme checkbox prvek, také se o to postaráme pomocí evt.target.checked . Můžeme také dále improvizovat přidáním další podmínky pro number zadejte pro získání hodnoty pomocí evt.target.valueAsNumber .

Podívejte se na to v akci a zdrojový kód

Zde je příklad, kdy aktualizujeme stav komponenty, když se změní vstupní hodnota. Aktualizace stavu můžete vizuálně vidět v sekci Náhled. Aktualizovaný stav je také aplikován na jinou komponentu, aby poskytl uživateli zpětnou vazbu.

Zdrojový kód naleznete zde

https://github.com/atapas/demolab/blob/master/code/src/demos/react/react-multiple-input-changes.js

Než skončíme...

To je prozatím vše. Doufám, že to pro vás bylo užitečné. Děkuji, že jste dočetli až sem! Pojďme se připojit. Můžete mi na Twitteru @tapasadhikary (@tapasadhikary) s komentáři nebo je můžete klidně sledovat.

Lajkujte/sdílejte tento článek, ať se dostane i k ostatním. Také by se vám mohlo líbit,

  • Porozumění dynamickým importům, lenosti a napětí pomocí React Hooks
  • Dynamické přidání řádku tabulky pomocí React Hook
  • Jak používat metody plánování JavaScriptu s háky React
  • Časová osa oznámení pomocí funkce React