Állapot felemelés a Reactban

Gyakran előfordul, hogy több komponensnek ugyanazt a változó adatot kell tükröznie. A Reactban ajánlott az közös állapotot a legközelebbi közös ősbe felemelni. Nézzük ezt egy példán keresztül.

Tegyük fel, hogy egy víz hőmérséklet kalkulátort szeretnénk készíteni. Ez egy input mezőből fog állni, ahol a felhasználó megadhatja a hőmérsékletet, és egy bekezdésből, amelyik kiírja a véleményt: a víz folyékony, szilárd vagy gáz halmazállapotú.

Tegyük fel, hogy a kalkulátorunk egy Calculator nevű konténer komponens:

jsxfunction Calculator() {
  return <div>
    
  </div>;
}

Vegyük ki a hőmérséklet megadására szolgáló input mezőt a TempInp komponensbe, a véleménnyel rendelkező bekezdést pedig a Verdict komponensbe:

jsxfunction Calculator() {
  return <div>
    <Verdict />
    <TempInp />
  </div>;
}

Könnyen megérthető, hogy mind a TempInp, mind a Verdict komponensnek állapotban kell tartania a hőmérsékletet. Ugyanakkor logikus, hogy ennek ugyanannak a hőmérsékletnek kell lennie: ahogy az input mezőbe írt adatok változnak, a véleménynek is frissülnie kell.

Ilyen esetben ajánlott egy állapot felemelés nevű technikát alkalmazni: a két (vagy több) komponens számára közös állapotot feljebb emeljük a legközelebbi közös szülőjükbe.

Esetünkben ez azt eredményezi, hogy a hőmérsékletet tároló állapot a Calculator komponensé lesz, ami továbbadja azt a TempInp és a Verdict komponenseknek prop-ként:

jsxfunction Calculator() {
  const [temp, setTemp] = useState(0);
  
  return <div>
    <Verdict temp={temp} />
    <TempInp temp={temp} />
  </div>;
}

A TempInp komponensben kell lennie egy input mezőnek a hőmérséklet megváltoztatásához. De mivel ez a hőmérséklet a komponens prop-ja, közvetlenül a TempInp komponensben nem módosítható. helyes megoldás, ha a Calculator komponensből egy speciális függvényt adunk át a hőmérséklet módosításához:

jsxfunction Calculator() {
  const [temp, setTemp] = useState(0);
  
  function changeTemp(event) {
    setTemp(event.target.value);
  }
  
  return <div>
    <Verdict temp={temp} />
    <TempInp temp={temp} changeTemp={changeTemp} />
  </div>;
}

Egyébként nem kell új függvényt bevezetni, hanem átadhatjuk a gyermek komponensnek a setTemp függvényt:

jsxfunction Calculator() {
  const [temp, setTemp] = useState(0);
  
  return <div>
    <Verdict temp={temp} />
    <TempInp temp={temp} setTemp={setTemp} />
  </div>;
}