Uwepo wa States katika React

Hebu sasa tuangalie jinsi uwepo unavyofanya kazi. Hufanya ili wakati state inapobadilika mabadiliko yanaonyeshwa papo hapo kwenye skrini.

Hebu tuangalie kwa mfano. Tuchukulie tuna state yenye jina la bidhaa:

jsxconst [name, setName] = useState('prod');

Tuonyeshe jina la bidhaa kwenye muundo:

jsxreturn <div>
  <span>{name}</span>
</div>;

Tutengeneze kifungo ambacho, unapobonyezwa state yetu itabadilika:

jsxreturn <div>
  <span>{name}</span>
  <button onClick={clickHandler}>btn</button>
</div>;

Kwenye kishughulikia kubofya tutumie kitendo setName, kuweka jina jipya la bidhaa:

jsxfunction clickHandler() {
  setName('xxxx');
}

Hebu tuchanganye msimbo wetu wote pamoja. Itatokea kuwa baada ya kubofya kifungo maandishi yatabadilika mara moja kwa thamani mpya:

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  function clickHandler() {
    setName('xxxx');
  }
  
  return <div>
    <span>{name}</span>
    <button onClick={clickHandler}>btn</button>
  </div>;
}

Matumizi ya vitendo maalum-vishughulikia sio lazima. Unaweza kutumia kitendo kisichojulikana cha mshale:

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  return <div>
    <span>{name}</span>
    <button onClick={() => setName('xxxx')}>btn</button>
  </div>;
}