React JS Bir Butona Çift Tıklamayı Yakalama

Uygulama geliştirirken bazen bir düğmeye kaç kere tıklandığını bilmek gerekli olabilir. Mesela aynı butona tek tıklandığında farklı bir iş ve çift tıklandığında ise daha farklı bir iş yapılmasını isteyebiliriz.

React Bir Butona Kaç Kez Tıklandığını Bulma

Bir butona kaç defat tıklandığını bulmak React JS içerisinde çok kolaydır. Bunun için öncelikle bir onClick eventi oluşturmak gerekir. Sonrasında eventi yakaladığımızda event.detail özelliği bize butona kaç defa tıklandığını verir.

import React from 'react';

function App() {

    const handeClick = (e) => {
        e.preventDefault();
        console.log(e.detail);
    }

    return (
        <div>
            <button onClick={handleClic}>
                Tıkla
            </button>
        </div>
    );
}

export default app;

Yukarıdaki kodu çalıştırdığınızda butona tıklandığında, kaç tıklama olduğunu konsola yazdıracaktır, mesela 1, 2 veya 3 gibi. Eğer çift tıklamayı arıyorsak bu değer 2 olmalıdır.

Eğer biz çift tıklama yapıldığında bir işlem yapacaksak bunu aşağıdaki gibi yapabiliriz.

import React from 'react';

function App() {

    const handeClick = (e) => {
        e.preventDefault();
        if(e.detail === 2) {
            console.log("👉️ Çift tıklama yapıldı.");
        }
    }

    return (
        <div>
            <button onClick={handleClic}>
                Tıkla
            </button>
        </div>
    );
}

export default app;

Evet sadece yapmamız gereken event.detail === 2 şeklinde bir denetim yapmak, eğer çift tıklama yapıldı ise event.detail 2 ye eşit olacaktır.

Sonuç

React JS ile geliştirme yaparken onClick eventini yakaladığımızda eventin detail özelliği düğmeye kaç defa tıklandığını belirtir. Eğer bu değer 2 ise düğmeye çift tıklanmış demektir.

Sorunuz mu var? Lütfen yorumlara yazınız.