Olekute tõstmine Reactis

Sageli peavad mitu komponenti kajastama samu muutuvaid andmeid. Reactis soovitatakse tõsta ühine olek lähima ühise esivanema juurde. Vaatame seda näite varal.

Oletame, et tahame teha vee temperatuuri kalkulaatori. See koosneb sisendväljast, kuhu kasutaja sisestab temperatuuri, ja lõigust, kus kuvatakse järeldus: vesi on vedel, vesi on tahke, vesi on gaasiline.

Oletame, et meie kalkulaator on konteinerkomponent Calculator:

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

Eraldame temperatuuri sisestamise välja komponenti TempInp ja järelduse lõigu - komponenti Verdict:

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

On lihtne mõista, et nii TempInp kui ka Verdict peavad omama temperatuuri olekut. Samas on loogiline, et see peaks olema sama temperatuur: andmete sisestamisel väljale peaks kuvatama järeldus.

Sellisel juhul soovitatakse kasutada võtet, mida nimetatakse oleku tõstmiseks: olek, mis on ühine kahele (või enamale) komponendile, tõstetakse üles nende ühise vanema juurde.

Meie puhul selgub, et temperatuuri olek peaks kuuluma komponendile Calculator, mis edastab selle TempInp ja Verdict komponentidele propsidena:

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

Komponendis TempInp peaks olema sisendväli temperatuuri muutmiseks. Kuid kuna see temperatuur on selle komponendi props, siis otse TempInp komponendis ei saa seda muuta. Õige oleks komponendist Calculator edastada spetsiaalne funktsioon temperatuuri muutmiseks:

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

Muide, võib mitte kasutusele võtta uut funktsiooni, vaid edastada alamkomponendile funktsiooni setTemp:

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