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.