React Js ile Buton Nasıl Kullanılır?

Butonlar tasarımlarımızda önemli yer tutar. Bir etkileşim, özellikle tıklama, almak istediğimizde kullanıyoruz. Bazen bir sunum için de kullanılabilir. Buton oluşturmak için Html kullanırken button etiketini kullanmamız yeterli olacaktır. Bu şuan anlama geliyor React kullanırken de button etiketi ile bir düğme oluşturabiliriz.

Bunun haricinde bir div etiketini de veya başka bir etiket, buton gibi kullanabiliriz. Nede olsa buton kullandığımızda bizim için önemli olan sunum (nasıl göründüğü) ve bir tıklama olduğunda cevap vermektir. Buraya kadar herşey sıradan görünüyor, büyük ihtimalle zaten biliyorsunuzdur. Şimdi basit bir button kodu yazalım Html ile.

<button>Tıkla</button>

Asıl bundan sonrası bizi ilgilendiriyor. Neden mi? Çünkü bir React JS uygulamasına bir düğme ekleyeceğiz ve sonrasında butona tıklamaları yani onClick eventini yakalayacağız.Fakat tek başına düğme veya onClick eventi yeterli olamayacaktır. Bunun yanında state kullanımı da gereklidir. Hemen basit bir sayaç ile konuyu detaylandıralım.

React Uygulamasında Button Kullanımı

Uygulamamız basit bir sayaç olacak. Düğmeye tıkladığımızda sayacımız bir artacak. Bunun için onClick eventini kullanacağız. Sayaç değerini de state üzerinde saklayacağız. Yazacağımız komponentin adı Counter olsun.

import React from 'react';

function Counter() {

    return (
        <div>
            <h1>Counter</h1>
            <div><span>Count: {count}</span></div>
            <hr />
            <div><button>Count It</button></div>
        </div>
    )
}

export default Counter;

Komponentimizin çatısını oluşturduk, şimdi sayma işlemine geçelim.

Sayaç için kullanacağımız değişkeni tanımlamak için react kütüphanesinden setState hookunun çağıracağız. Çünkü count değişkeninin değeri değiştiğinde komponentin tekrar render etmemiz gerekecek. Bunu en kolay şekilde state üzerinde bir değişken olarak tanımlayarak yapabiliriz. State değiştiğinde komponent tekrardan render edilecektir.

const [count, setCount] = useState(0);

count değişkenini oluşturduk ve ona başlangıç olarak 0 değerini atadık. Sonrasında return içerisinde

<div><span>Count: {count}</span></div>

satırı ile count değişkenini yazdırıyoruz. count state üzerinde tanımlandığı için her değiştiğinde komponent baştan render edilecek ve dolayısı ile count değişkeni ekrana tekrardan yazılacaktı, tabii ki eğer değer değişti ise yeni değeri kullanılacaktır.

Şimdi ilk olarak düğmemize bir onClick eventi ekleyelim.

<button onClick={(e) => handleClick(e)}>Count It</button>

onClick eventini yakalandığında handleClick fonksiyonunu çağırıyoruz. Şimdi bu fonksiyonu düzenleyelim.

const handleClick = (e) => {
    e.preventDefault();
    setState(cout + 1);
}

Düğmeye tıklandığında, handleClick çağrılacak ve bu fonksiyon içerisinde ilk olarak

e.preventDefault();

çağırılacak ve eventin ön tanımlı işlemi iptal edilecek. Sonrasında

setState(cout + 1);

ile count değerini alarak onu 1 ekliyoruz ve sonucu tekrar setState ile count değişkenine atıyoruz. count değişkeni değiştiğinden yeni bir render işlemi oluşacak ve buda aşağıdaki kodun tekrar çalışmasına neden olacaktır. İlk butona tıkladığımızda sayaç 0 dan 1e dönecek, ve her tıklamadan bu değer 1 artacaktır.

<div><span>Count: {count}</span></div>

Bu satırın tekrar render edilmesi için düğmeye tıklanması yeterli olacaktır. Komponentin tüm kodları şu şekilde olacaktır.

import React, { useState } from "react";

function Counter() {
    const [count, setCount] = useState(0);

    const handleClick = (e) => {
        e.preventDefault();
        setState(cout + 1);
    }

    return (
        <div>
            <h1>Counter</h1>
            <div><span>Count: {count}</span></div>
            <hr />
            <div><button>Count It</button></div>
        </div>
    )
}

export default Counter;

React üzerinde buton tanımlamamak bu kadar. Siz de bu komponente yeni bir düğme ekleyerek, sayacın değerini azaltabilirsiniz. Yapacağınız işlemler aynı olacaktır. Tek fark count değerini artırmak yerine azaltmak olacaktır.

Sonuç

React ile bir arayüz geliştirirken, bize sadece yapacağımız işlemleri belirtmek düşüyor. React geri kalan işlemleri kendisi bizim yerimize idare etmektedir. Buton eklerken işlemler sonucunda değişen değerlerin yeniden sayfada gösterilmesi için state kullanmak gerekiyor.

Siz de state kullanırken yaşadığınız deneyimleri bizimle paylaşır mısınız?