Stāvokļu paceļana React

Bieži vien vairākiem komponentiem jāatspoguļo viens un tie paši mainīgie dati. React ieteicams izmantot kopīgo stāvokli paceļot to līdz tuvākajam kopīgajam priekštečam. Apskatīsim piemērā.

Pieņemsim, ka mēs vēlamies izveidot ūdens temperatūras kalkulatoru. Tas būs ievades lauks, kurā lietotājs ievadīs temperatūru, un rindkopa, kurā tiks izvadīts secinājums: ūdens ir šķidrs, ūdens ir cietsts, ūdens ir gāzveida.

Pieņemsim, ka mūsu kalkulators ir konteinera komponents Calculator:

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

Izveidosim atsevišķu komponentu temperatūras ievadei TempInp, bet rindkopu ar secinājumu - komponentā Verdict:

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

Viegli saprast, ka gan TempInp, gan Verdict ir jābūt stāvoklim ar temperatūru. Tomēr ir loģiski, ka tai jābūt vienai un tai pašai temperatūrai: ievadot datus ievades laukā, secinājumam jāatjauninas.

Šādā gadījumā ieteicams izmantot paņēmienu, ko sauc par stāvokļa paceļanu: stāvoklis, kas ir kopīgs diviem (vai vairākiem) komponentiem, tiek pacelts augšup līdz to kopējam vecākkomponentam.

Mūsu gadījumā izrādīsies, ka stāvoklim ar temperatūru jāpieder komponentam Calculator, kurs nodos to TempInp un Verdict kā props:

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

Komponentā TempInp jābūt ievades laukam temperatūras maiņai. Bet, tā kā šī temperatūra ir šī komponenta props, tieši TempInp to mainīt nevar. Pareizi būtu no komponenta Calculator nodot īpašu funkciju temperatūras maiņai:

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

Starp citu, var neievadīt jaunu funkciju, bet nodot pakārtotajā komponentā funkciju setTemp:

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