Zvedání stavů v Reactu

Často několik komponent musí reflektovat stejná měnící se data. V Reactu je doporučeno zvednout společný stav k nejbližšímu společnému předkovi. Podívejme se na příkladu.

Řekněme, že chceme vytvořit kalkulačku teploty vody. Bude představovat input, do kterého uživatel bude zadávat teplotu, a odstavec, do kterého se bude vypisovat verdikt: voda je kapalná, voda je pevná, voda je plynná.

Řekněme, že naše kalkulačka představuje kontejnerovou komponentu Calculator:

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

Vynesme input pro zadání teploty do komponenty TempInp, a odstavec s verdiktem - do komponenty Verdict:

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

Je snadné pochopit, že jak TempInp, tak Verdict musí mít stav s teplotou. Přitom je logické, že by to měla být jedna a ta samá teplota: jak se zadávají data do inputu, musí se zobrazovat verdikt.

V takovém případě je doporučeno použít postup, nazývaný zvedání stavu: stav, společný pro dvě (a více) komponent, je zvednut nahoru k jejich společnému rodiči.

V našem případě vyjde, že stav s teplotou by měl patřit komponentě Calculator, který jej bude předávat do TempInp a Verdict jako props:

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

V komponentě TempInp by měl být input pro změnu teploty. Ale, protože tato teplota je props této komponenty, tak přímo v TempInp ji nelze měnit. Správně bude předat z komponenty Calculator speciální funkci pro změnu teploty:

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>;
}

Lze, mimochodem, nezavádět novou funkci, ale předat do dceřiné komponenty funkci setTemp:

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