React Academy · Oppitunti

Dynaamiset kentät useFieldArraylla

Lisätkää, poistakaa ja järjestäkää dynaamisia lomakekenttiä useFieldArray-hookin avulla.

Oppitunti 4/413 vaihetta

Dynaamiset kentät useFieldArraylla on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Tervetuloa

Tällä oppitunnilla käytät React Hook Formin useFieldArray-hookia dynaamisia kenttälistoja sisältävien lomakkeiden rakentamiseen — esimerkiksi alkioiden lisäämiseen, poistamiseen ja järjestämiseen uudelleen.

Mikä on useFieldArray?

useFieldArray hallinnoi React Hook Formin sisällä olevaa kenttätaulukkoa. Se tarjoaa append-, prepend-, remove-, swap-, move- ja insert-metodit kenttälistan muokkaamiseen.

import { useFieldArray } from 'react-hook-form';

const { fields, append, remove } = useFieldArray({
  control,
  name: 'phoneNumbers',
});

Asetukset: control useForm-funktiosta

useFieldArray tarvitsee useForm-funktiosta saatavan `control`-olion. Pura se yhdessä register- ja handleSubmit-arvojen kanssa.

const { register, control, handleSubmit } = useForm({
  defaultValues: { phoneNumbers: [{ value: '' }] },
});

Kenttien hahmontaminen

Käy `fields`-taulukko läpi map-metodilla ja hahmonna jokainen alkio. Käytä kentän `id`-arvoa React-avaimena, älä indeksisummaa. Rekisteröi jokainen kenttä taulukkopolun syntaksilla.

return fields.map((field, index) => (
  <div key={field.id}>
    <input
      {...register(`phoneNumbers.${index}.value`)}
    />
    <button onClick={() => remove(index)}>Remove</button>
  </div>
));

Uusien kenttien lisääminen

Kutsu append()-funktiota oletusarvo-oliolla lisätäksesi uuden kentän listan loppuun. Lomake rekisteröi sen automaattisesti.

<button onClick={() => append({ value: '' })}>
  Add Phone Number
</button>

Kenttien poistaminen

Kutsu remove(index)-funktiota poistaaksesi kentän tietystä kohdasta. Kaikki seuraavat kentät siirtyvät yhden paikan ylöspäin, ja niiden rekisteröinnit päivittyvät automaattisesti.

<button onClick={() => remove(index)}>Delete</button>

Kenttien vähimmäismäärän validointi

Voit validoida taulukon pituuden Zod-skeeman .min()-metodilla ja varmistaa, että vähintään yksi kenttä on olemassa.

const schema = z.object({
  emails: z.array(z.object({ value: z.string().email() }))
           .min(1, 'At least one email required'),
});

Kenttien vaihtaminen ja siirtäminen

Käytä `swap(indexA, indexB)`-funktiota kahden kentän vaihtamiseen tai `move(from, to)`-funktiota kentän siirtämiseen. Näitä käytetään vedä ja pudota -toiminnolla järjestettävissä kenttälistoissa.

swap(0, 2); // swap first and third items
move(3, 0); // move item at index 3 to the top

Sisäkkäinen useFieldArray

Voit sijoittaa useFieldArray-hookin toisen useFieldArray-hookin sisään ja rakentaa näin monitasoisia dynaamisia lomakkeita, kuten laskun, jossa on rivikohteita ja niillä alikohteita.

Taulukkodatan lähettäminen

Lähetyksen yhteydessä handleSubmit välittää koko taulukon osana data-oliota. Käytä sitä osoitteessa data.phoneNumbers — kyseessä on kenttärakennetta vastaavien olioiden taulukko.

const onSubmit = (data) => {
  console.log(data.phoneNumbers);
  // [{ value: '555-1234' }, { value: '555-5678' }]
};

Pikatarkistus

Miksi useFieldArray-kenttiä hahmonnettaessa React-avaimena kannattaa käyttää field.id-arvoa eikä taulukkoindeksiä?

Vastaa interaktiivisessa oppitunnissa

Kertaus

useFieldArray tarjoaa fields-taulukon sekä append-, remove-, swap- ja move-metodit. Käytä field.id-arvoa React-avaimena, rekisteröi kentät syntaksilla ”fieldName.index.subfield” ja validoi taulukot Zodin min- ja max-metodeilla.

Kurssi suoritettu

Onnittelut! Suoritit kurssin **Lomakkeiden hallinta React Hook Formilla**. Osaat nyt rakentaa suorituskykyisiä lomakkeita RHF:llä, käyttää Zod-skeemavalidointia ja luoda dynaamisia kenttätaulukoita.

Aloita maksutta

Opi React tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 88
Oppitunnit: 324

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Dynaamiset kentät useFieldArraylla” ilmainen?

Kyllä – oppitunnin ”Dynaamiset kentät useFieldArraylla” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Dynaamiset kentät useFieldArraylla”?

Lisätkää, poistakaa ja järjestäkää dynaamisia lomakekenttiä useFieldArray-hookin avulla. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Dynaamiset kentät useFieldArraylla”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?

Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: React Academy