Bemenetek kezelése Reactben

A bemenetek kezelése Reactben állapotok segítségével történik. Minden bemenethez hozzárendelünk egy állapotot, amely tartalmazza a bemenet value értékét.

Nézzünk egy példát. Tegyük fel, hogy van egy bemenetünk:

jsxfunction App() {
  return <div>
    <input />
  </div>;
}

Tegyük fel továbbá, hogy van egy állapotunk:

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  return <div>
    <input />
  </div>;
}

Kössük hozzá az állapotunkat a bemenet value attribútumához:

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  return <div>
    <input value={value} />
  </div>;
}

Ebben az esetben az fog történni, hogy az állapot változásakor reaktívan megváltozik a bemenet szövege is.

Ennek azonban van egy érdekes mellékhatása: most, ha a kódot a böngészőben futtatjuk, a bemenetben lehetetlen megváltoztatni a szöveget! Miért: mert amikor szöveget írunk a bemenetbe, nem változik a value állapot, ennek megfelelően a szöveg a bemenetben sem változhat.

Próbáld ki magad. Másold le a kódomat és futtasd nálad. Próbáld megváltoztatni a szöveget a bemenetben - nem fog sikerülni. Nyisd meg a böngésző konzolját - egy React figyelmeztetést fogsz látni benne. Ez a figyelmeztetés arra utal, hogy kötöttünk egy állapotot a bemenethez, de ezzel blokkoltuk a bemenetet.

Tegyük úgy, hogy a bemenetünkbe lehessen szöveget beírni. Ehhez azt kell elérnünk, hogy beíráskor az állapotunk a bemenet aktuális értékére változzon.

Először is ehhez a bemenetre fel kell függesztenünk egy onChange eseményt:

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  return <div>
    <input value={value} onChange={handleChange} />
  </div>;
}

Ez az esemény a Reactben másképp viselkedik a tiszta JS-hez képest. A Reactben azonnal elsül a bemenet változásakor. Vagyis egy karakter beírásakor vagy törlésekor.

Most adjuk hozzá az eseményünk kezelőjét:

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  function handleChange() {
    
  }
  
  return <div>
    <input value={value} onChange={handleChange} />
  </div>;
}

Ebben a kezelőben ki kell olvasnunk a bemenet jelenlegi szövegét és be kell állítanunk az állapotba a setValue függvénnyel.

A probléma az, hogy a függvény this-je nem fog a bemenetünkre mutatni - ez a React sajátossága. Ahhoz, hogy megkapjuk az elemet, amiben az esemény történt, a event.target-et kell használnunk:

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  function handleChange(event) {
    console.log(event.target); // hivatkozás a bemenet DOM elemére
  }
  
  return <div>
    <input value={value} onChange={handleChange} />
  </div>;
}

Jelenítsük meg a event.target segítségével a bemenet jelenlegi szövegét:

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  function handleChange(event) {
    console.log(event.target.value); // a bemenet jelenlegi szövege
  }
  
  return <div>
    <input value={value} onChange={handleChange} />
  </div>;
}

És most írjuk be a bemenet szövegét az állapotunkba:

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  function handleChange(event) {
    setValue(event.target.value);
  }
  
  return <div>
    <input value={value} onChange={handleChange} />
  </div>;
}

Most már tudunk szöveget beírni a bemenetbe. Eközben a value állapot mindig tartalmazni fogja a bemenet aktuális szövegét.

Ezt könnyen beláthatjuk. Jelenítsük meg az állapotunk szövegét egy bekezdésben. Ebben az esetben amikor szöveget írunk a bemenetbe, a beírt szöveg automatikusan meg fog jelenni a bekezdésben is:

jsxfunction App() {
  const [value, setValue] = useState('');
  
  function handleChange(event) {
    setValue(event.target.value);
  }
  
  return <div>
    <input value={value} onChange={handleChange} />
    <p>text: {value}</p>
  </div>;
}

Átírhatjuk egy tömörebb változatra név nélküli nyíl függvénnyel:

jsxfunction App() {
  const [value, setValue] = useState('');
  
  return <div>
    <input value={value} onChange={event => setValue(event.target.value)} />
    <p>text: {value}</p>
  </div>;
}

Tehát bármely bemenet működéséhez a következőkre van szükségünk: létrehozunk egy állapotot a bemenethez, hozzákötjük az állapotot a bemenet value attribútumához, felfüggesztünk egy onChange eseményt a bemenetre, az esemény kezelőjében megváltoztatjuk a bemenet állapotát a szövegére.

Ezeket a műveleteket minden egyes bemenettel el kell végeznünk. Vagyis, ha két bemeneted van, akkor két állapotod és két onChange eseménykezelő függvényed lesz.