Падзей станняў у React

Часта некалькі кампанентаў павінны адлюстроўваць адны і тыя ж зменлівыя даныя. У React рэкамендавана падымаць агульны стан да бліжэйшага агульнага продка. Давайце паглядзім на прыкладзе.

Хай мы хочам зрабіць калькулятар тэмпературы вады. Ён будзе прадстаўляць сабой інпут, у які карыстальнік будзе ўводзіць тэмпературу, і абзац, у які будзе выводзіцца вердыкт: вада вадкая, вада цвёрдая, вада газападобная.

Хай наш калькулятар прадстаўляе сабой кампанент-кантэйнер Calculator:

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

Вынясем інпут для ўводу тэмпературы ў кампанент TempInp, а абзац з вердыктам - у кампанент Verdict:

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

Лёгка зразумець, што і TempInp, і Verdict павінны мець стэйт з тэмпературай. Пры гэтым лагічна, што гэта павінна быць адна і тая ж тэмпература: у меру ўводу даных у інпут павінен адлюстроўвацца вердыкт.

У такім выпадку рэкамендавана выкарыстоўваць прыём, які называецца падзей стання: стан, агульнае для двух (і больш) кампанентаў падымаецца ўгору да іх агульнага бацькі.

У нашым выпадку атрымаецца, што стэйт з тэмпературай павінен належаць кампаненту Calculator, які будзе перадаваць яго ў TempInp і Verdict у якасці пропсаў:

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

У кампаненце TempInp павінен быць інпут для змены тэмпературы. Але, так як гэтая тэмпература з'яўляецца пропсам дадзенага кампанента, то непасрэдна ў TempInp змяняць яго нельга. Правільна будзе перадаць з кампанента Calculator спецыяльную функцыю для змены тэмпературы:

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

Можна, дарэчы, не ўводзіць новую функцыю, а перадаць у даччыны кампанент функцыю setTemp:

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