JSX'te Olayları Ekleme
Şimdi React'ta olaylarla çalışmayı inceleyelim.
Örneğin, bir bloğa tıklandığında belirli bir metinle
bir alert görüntülenecek şekilde yapalım.
Bir mesajla alert görüntüleyen showMess
adlı bir fonksiyonumuz olduğunu ve HTML kodunda
bu alert'i görmek istediğimizde tıklayabileceğimiz
bir düğme olduğunu varsayalım:
function App() {
function showMess() {
alert('hello');
}
return <div>
<button>show</button>
</div>;
}
Şimdi düğmemize, bu div'e tıklandığında
showMess fonksiyonunun tetiklenmesi için
onclick olayını bağlayalım. Bunun için
onClick özniteliğini (camelCase ile, yani
onClick, onclick değil) eklememiz
ve içinde bu olay tetiklendiğinde çalışacak
fonksiyonu belirtmemiz gerekir:
function App() {
function showMess() {
alert('hello');
}
return <div>
<button onClick={showMess}>show</button>
</div>;
}
Olaylarla çalışma bu şekilde gerçekleşir:
Bir öznitelik eklenir (örneğin, onClick
veya onFocus), özniteliğin değeri olarak
o olay tetiklendiğinde çağrılacak metod belirtilir.
Aşağıdaki kod verilmiştir:
function App() {
function show1() {
alert(1);
}
function show2() {
alert(2);
}
return <div>
<button>act1</button>
<button>act2</button>
</div>;
}
İlk düğmeye tıklandığında ilk fonksiyonun, ikinci düğmeye tıklandığında ise ikinci fonksiyonun tetiklenmesini sağlayın.