Reaktivitás az állapotokban Reactben

Most nézzük meg, hogyan működik a reaktivitás. Ez azt eredményezi, hogy az állapot megváltozásakor a változások azonnal megjelennek a képernyőn.

Nézzünk egy példát. Tegyük fel, hogy van egy állapotunk a termék nevével:

jsxconst [name, setName] = useState('prod');

Jelenítsük meg a termék nevét a felületben:

jsxreturn <div>
  <span>{name}</span>
</div>;

Készítsünk most egy gombot, amelyre kattintva az állapotunk megváltozik:

jsxreturn <div>
  <span>{name}</span>
  <button onClick={clickHandler}>btn</button>
</div>;

A kattintáskezelőben használjuk a setName függvényt, hogy beállítsuk a termék új nevét:

jsxfunction clickHandler() {
  setName('xxxx');
}

Állítsuk össze az egész kódunkat. Az eredmény az lesz, hogy a gomb megnyomása után a szöveg azonnal lecserélődik az új értékre:

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  function clickHandler() {
    setName('xxxx');
  }
  
  return <div>
    <span>{name}</span>
    <button onClick={clickHandler}>btn</button>
  </div>;
}

A külön kezelőfüggvények használata nem kötelező. Használhatunk névtelen nyílfüggvényt is:

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  return <div>
    <span>{name}</span>
    <button onClick={() => setName('xxxx')}>btn</button>
  </div>;
}