⊗jsrtPmStRt 53 of 112 menu

React'ta State Reactivite

Şimdi reactivitenin nasıl çalıştığına bakalım. Reactivite, state değiştiğinde bu değişikliklerin anında ekrana yansımasını sağlar.

Bir örnekle inceleyelim. Ürün adı için bir state'imiz olsun:

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

Ürün adını HTML çıktısında gösterelim:

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

Şimdi, tıklandığında state'imizi değiştirecek bir buton yapalım:

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

Tıklama işleyicisinde, ürüne yeni bir ad vermek için setName fonksiyonunu kullanacağız:

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

Tüm kodumuzu bir araya getirelim. Butona tıklandıktan sonra metnin anında yeni değere değiştiğini göreceğiz:

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

Ayrı işleyici fonksiyonlar kullanmak zorunlu değildir. Anonim bir ok fonksiyonu da kullanılabilir:

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

Kullanıcının adı ve soyadı için state'ler verilmiştir. Bunları HTML çıktısında gösterin. Bu state'leri değiştirmek için butonlar yapın.

Türkçe
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenЎзбекOʻzbekTiếng Việt
Web sitesinin çalışması, analiz ve kişiselleştirme için çerezleri kullanıyoruz. Veri işleme, Gizlilik Politikası'na uygun olarak gerçekleşir.
tümünü kabul et özelleştir reddet