Kuidas kasutada Reaketi kontrollitud sisendeid vormivälja koheseks valideerimiseks

Juhitavad sisendid võimaldavad lihtsaid asju, näiteks nupu Edastamine keelamist, kui mõned väljad puuduvad või on kehtetud.

Kuid me ei peatu seal muidugi.

Kuigi keelatud nupp on kena, ei pruugi kasutaja teada, miks ta ei saa sellel nupul klõpsata. Nad ei pruugi teada, mis vea nad selle välja lülitanud on või isegi milline väli seda põhjustab.

Ja see pole ilus. Peame selle kindlasti parandama.

Juhitavate sisendite põhitõed

Juhitavate sisendite kasutamine tähendab, et salvestame kõik sisendväärtused oma olekusse. Seejärel saame iga väärtuse muutumisega konkreetset seisundit hinnata ja selle põhjal midagi teha. Varem keelasime ainult nupu.

Kasutasime nupu keelamise arvutamiseks lihtsat väljendit (näiteks kui e-posti või parooli väli oli tühi):

const {email, password} = this.state;
const isEnabled =
  email.length> 0 &&
  parool.pikkus> 0;
 Logi sisse 

Sellega sai töö tehtud. Nüüd peame halbade sisendite märkimiseks esitama endale paar küsimust.

Kuidas vigu näidatakse?

See on oluline küsimus, mida endalt küsida, kuna erinevad nõuded võivad õigustada erinevate vigade esinemist.

Sisestusvigade kuvamiseks on palju viise. Näiteks võite:

  • Kuvage
  • Märkige punased sisendid, mis sisaldavad halbu andmeid
  • Kuvage vead vastavate sisendite kõrval
  • Vormi ülaosas kuvage vigade loend
  • Mis tahes ülaltoodu kombinatsioon või midagi muud!

Kumba peaksite kasutama? Noh, see on kõik kogemuste kohta, mida soovite pakkuda. Valige, mida soovite.

Selle postituse jaoks kasutan kõige lihtsamat - märkides halvad sisendid punaselt, ilma millegi muuta.

Kuidas vigu kuvatakse?

See, kuidas soovite vigu kuvada, mõjutab seda, kuidas võite neid esindada.

Et näidata, kas konkreetne sisend on kehtiv ja ilma lisateabeta selle kohta, miks see võib olla kehtetu, piisab midagi sellist:

vead: {
  nimi: vale,
  e-post: tõsi,
}

vale tähendab, et pole vigu või see on täiesti kehtiv; true tähendab, et väli on kehtetu.

Tulevikus, kui otsustame, et peame salvestama põhjuse, miks midagi oli kehtetu, võime õige / vale asendada tõrketeadet sisaldava stringiga.

Kuid kuidas see veaobjekt luuakse?

Nüüd, kui me teame, kuidas me tahame vigu kuvada, ja teame, kuidas neid esindada, on midagi olulist puudu.

Kuidas vigu tegelikult luua.

Või öelge teine ​​viis: kuidas me võtame olemasolevad sisendid, valideerime need ja saame vajaliku veaobjekti?

Vajame selleks valideerimisfunktsiooni. See aktsepteerib väljade praeguseid väärtusi ja tagastab veaobjekti meile.

Jätkame registreerumisvormi näitega. Tuletage meelde, et meil oli see:

const {email, password} = this.state;
const isEnabled =
  email.length> 0 &&
  parool.pikkus> 0;

Tegelikult saame selle loogika tüki muuta valideerimisfunktsiooniks, mis:

  • Kas meiliaadress: tõsi, kui meiliaadress on tühi, ja
  • Kas parool: tõene, kui parool on tühi
funktsiooni kinnitamine (e-post, parool) {
  // true tähendab kehtetut, nii et meie tingimused muudeti vastupidiseks
  tagastama {
    e-post: email.length === 0,
    parool: parool.pikkus === 0,
  };
}

Ülejäänud tükk

Järele jääb üks pusletükk.

Meil on valideerimisfunktsioon ja me teame, kuidas me tahame vigu näidata. Meil on ka vorm.

Nüüd on aeg punktid ühendada.

1. samm: käivitage valideerija renderduses.

Valideerimise funktsioonil pole mingit kasu, kui me seda kunagi ei kutsu. Tahame sisendeid valideerida iga kord (jah, iga kord), kui vorm uuesti renderdatakse - võib-olla on sisendis uus märk.

const Error = valideerima (see.state.email, this.state.password);

2. samm: keelake nupp.

See on lihtne. Nupp tuleks tõrgete korral keelata (see tähendab, kui mõni vigadest vastab tõele).

const isEnabled =! Object.keys (vead) .mõned (x => vead [x]);

3. samm: märkige sisendid vigaseks.

See võib olla ükskõik. Meie puhul piisab veaklassi lisamisest halbadele sisenditele.

Saame lisada ka lihtsa CSS-i reegli:

.error {ääris: 1 px tahke punane; }

Üks asi veel

Kui vaatate ülaltoodud JS-binit, võite märgata midagi veidrat. Väljad on vaikimisi märgitud punaseks, kuna tühjad väljad on kehtetud.

Kuid me ei andnud kunagi kasutajale võimalust esimesena sisestada! Esmakordselt teravustades on väljad punased.

See pole UX-i jaoks suurepärane.

Parandame selle veaklassi lisamisega, kui väli oli vähemalt korra fookuses, kuid pärast seda on see hägustunud. See tagab, et kui kasutaja esimest korda põllule keskendub, ei kuvata viga kohe. Selle asemel ilmub see välja alles siis, kui väli on udune. Järgnevatel fookustel võib siiski viga ilmneda.

See on hõlpsasti saavutatav, kui kasutada onBluri sündmust ja olekut, et jälgida, mida hägustati.

klassi SignUpForm laiendab React.Component {
  ehitaja () {
    Super();
    see.riik = {
      e-post: '',
      parool: '',
      puudutatud: {
        e-post: vale,
        parool: vale,
      },
    };
  }
  // ...
  handleBlur = (väli) => (evt) => {
    this.setState ({
      puudutatud: {... see.riik.puudutatud, [väli]: tõene},
    });
  }
  renderdama ()
    const shouldMarkError = (väli) => {
      const hasError = vead [väli];
      const shouldShow = this.state.touched [väli];
      kas tagastada viga? peaksShow: vale;
    };
    // ...
    
      type = "text"
      placeholder = "Sisesta e-post"
      value = {this.state.email}
      onChange = {this.handleEmailChange}
    />
  }
}

Pole nii raske, eks?

Viimane puudutus

Pange tähele, et peaksMarkError mõjutab ainult väljade esitlust. Edastamise nupu olek sõltub ikkagi ainult valideerimisvead.

Kas soovite lisada kena lõpupoole? Kui kasutaja hoiab kursori või klõpsab puudega saatmisnuppu, võite sundida vigade kuvamist kõigil väljadel, sõltumata sellest, kas need on fookuses. Nüüd proovige seda ise järele proovida.

Avaldasin selle algselt oma ajaveebis aadressil goshakkk.name

Kui te seda kaevate, siis andke mulle mõned plaksutamised ja vaadake mu Reaxi abil vormide käsitsemise sarja. Võite ka tellida, et saada uusi postitusi otse postkasti.