Tilan Hallinta UseState-Koukulla

useState-hook on olennainen React-hook, joka mahdollistaa tilan (state) käytön funktiokomponenteissa. Sen avulla voidaan määritellä ja päivittää tilamuuttujia komponentin sisällä.

Syntaksi:

useState-hookia käytetään kutsumalla sitä ja antamalla alkuperäinen tila (initialState) argumenttina. Se palauttaa taulukon, jossa on kaksi alkiota: nykyinen tilan arvo (state) ja funktio (setState), jolla tilaa päivitetään.

const [state, setState] = useState(initialState);

• Tilamuuttujalle (state) voi valita minkä tahansa nimen. On suositeltavaa käyttää nimeä, joka kuvaa tallennettavaa tai päivitettävää tilaa, kuten inputValue, page, number, name jne.;

• Myös setState-funktion nimen voi valita vapaasti. Kuitenkin vakiintunut käytäntö on nimetä setState-funktio siten, että sen nimi alkaa "set"-etuliitteellä ja jatkuu tilamuuttujan nimellä. Esimerkiksi, jos state-muuttuja on mail, vastaava setState-funktio olisi yleensä nimeltään setMail.

Esimerkki 1:

Rakennetaan Counter-komponentti, joka ylläpitää omaa tilaansa. Kun "Increment"-painiketta painetaan, tila päivitetään ja komponentti renderöidään uudelleen.

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

Tässä esimerkissä useState-hookia käytetään tilamuuttujan count määrittämiseen, jonka alkuarvo on 0. setCount-funktiolla päivitetään count-muuttuja aina, kun painiketta painetaan.

Rivikohtainen selitys:

• Rivi 1: Tuodaan useState-hook React-kirjastosta sen toiminnallisuuden hyödyntämiseksi;
• Rivi 3: Määritellään Counter-komponentti tavanomaisella funktiosyntaksilla;
• Rivi 4: Alustetaan tila useState-hookilla;
  1. count edustaa laskurin arvoa. Sen alkuarvo on 0, joka määritellään useState(0)-kutsussa;

2. setCount on funktio, jolla tila päivitetään tarvittaessa.

• Rivillä 6-8: Tämä nuolifunktio käsittelee tilan päivityslogiikan. Se suoritetaan, kun "increment"-painiketta painetaan. Funktion sisällä käytetään setCount-funktiota tilan päivittämiseen;
• Rivillä 10-15: Renderöidään komponentin merkkaus. Rivillä 12 näytetään nykyinen tilan arvo (count). Painike rivillä 13 käyttää onClick-attribuuttia määrittääkseen suoritettavan funktion painettaessa. Tässä tapauksessa välitetään increment-funktio.

Sovelluksen koko koodi:

Esimerkki 2:

Rakennetaan Form-komponentti, jolla on oma itsenäinen tila. Kehotamme käyttäjää syöttämään nimensä syötekenttään, ja syötteen perusteella muutamme näytettävää sisältöä.

import React, { useState } from "react";

const Form = () => {
  const [userName, setUserName] = useState("");

  const handleChange = (event) => {
    const inputValue = event.target.value;
    setUserName(inputValue);
  };

  return (
    <div>
      <input
        type="text"
        value={userName}
        onChange={handleChange}
        placeholder="Your name"
      />
      <p>Hello, {userName}!</p>
    </div>
  );
};

Tässä esimerkissä useState-hookia käytetään tilamuuttujan userName määrittämiseen, jonka alkuarvo on tyhjä merkkijono. setUserName-funktiolla päivitetään userName-muuttuja aina tarvittaessa.

Rivikohtainen selitys:

• Rivi 1: Tuodaan useState-hook React-kirjastosta sen toiminnallisuuden käyttämiseksi;
• Rivi 3: Määritellään Form-komponentti käyttämällä tavallista funktiosyntaksia;
• Rivi 4: Asetetaan alkuperäinen tila useState-hookilla;

1. userName edustaa syötekentän arvoa, joka on aluksi asetettu tyhjäksi merkkijonoksi (""), määriteltynä useState("")-sulkujen sisällä;
2. setUserName on funktio, jonka avulla tilaa voidaan päivittää tarvittaessa.

• Rivillä 6-9: Tämä JavaScript-nuolifunktio käsittelee tilan päivityslogiikan. Se käynnistyy, kun käyttäjä kirjoittaa kenttään. Syötteen arvo haetaan funktiossa event.target.value avulla. Tämän jälkeen käytetään setUserName-funktiota tilan päivittämiseen syötekentän arvolla;
• Rivillä 11-21: Komponentin merkkaus renderöidään.
  1. Rivillä 15 asetetaan userName syötekentän alkuarvoksi value-attribuutilla;
  2. Rivillä 16 käytetään onChange-attribuuttia määrittämään funktio, joka kutsutaan, kun syötteessä tapahtuu muutos.

Sovelluksen koko koodi: