React 6 – onClick Metodu

Öncelikle önceki örnekte oluşturduğumuz dosyaları components klasörü altına düzenli şekilde taşıyalım ki, daha büyük karmaşalar yaşamadan düzenli hale getirmiş olalım.

Ardından bu components klasörünün altına bir tane “button-example” adından bir klasör oluşturalım.

Bunun altına da “ButtonExample.js” isminde, onClick metodunu anlatabilmek için bir js dosyası oluşturalım .

import React from "react";

function ButtonExample() {

    return (
    <div className="buttonExample">
        <button>Tik</button>
    </div>);
}

export default ButtonExample;

Hepsinden önce bu componentteki değişiklikleri görebilmek için App componenti içinde bu componenti çağırmamız gerekiyor. App componenti içinde aşağıdaki değişikliği yapıyoruz.

function App() {
  return (
    <div className="App">
        <ButtonExample></ButtonExample>
    </div>
  );
}

Sonrasında functional olarak bu componenti oluşturalım.

İçinde bir adet button olsun.

Burada en basit hali ile butona basıldığında nasıl alert veririz?

button tagındaki “onClick” attribute’ünü kullanak. Peki butona basıldığı anda yapacağı işlemi nasıl belirteceğiz?

JSX’lerin içerisinde süslü parantezler arasına Javascript kodu yazabiliyoruz. Burada da onClick metodu aslında bir Javascript kodu çağıracağı için şu şekilde bir kod yazabiliriz.

 <button onClick = {handleClick}>Tik</button>

Bu kod demektir ki: “benim “handleClick” adında bir fonksiyonum var. Bu butona tıklandığında bu fonksiyon çalışır”.

Peki bu metod ne yapacaktı? İlk olarak sadece alert üretecekti. Yazalım:

function handleClick(){
    alert('clicked')
}

JSX içinden en basit hali ile bir fonksiyon çağırmış olduk.

Kodun tamamı aşağıdaki gibidir.

import React from "react";

function ButtonExample() {

    return (
    <div className="buttonExample">
        <button onClick = {handleClick}>Tik</button>
    </div>);
}

function handleClick(){
    alert('clicked')
}

export default ButtonExample;
 

Sadık Bahadır Memiş

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir