Olayları Yönetme React- İçinde olay işlemeye yönelik kapsamlı bir rehber React .js

NET'te etkileşimli ve dinamik kullanıcı arabirimleri oluşturmada olaylar hayati bir rol oynar React. React Bu eğitimde, olayları nasıl ele alacağımızı ve kullanıcı eylemlerine etkili bir şekilde nasıl yanıt vereceğimizi keşfedeceğiz .

JSX'te Olay İşleme

React yerel tarayıcı olaylarını saran ve farklı tarayıcılarda normalleştiren sentetik bir olay sistemi sağlar. Özelliği kullanarak olay işleyicilerini doğrudan JSX öğelerine ekleyebiliriz onEventName.

Örnek:

function handleClick() {  
  console.log("Button clicked!");  
}  
  
<button onClick={handleClick}>Click Me</button>

Olay İşleyicileri ve Olay Nesneleri

Bir olay tetiklendiğinde, React olay işleyici işlevine otomatik olarak bir olay nesnesi iletir. Olay hakkında hedef öğe, fare koordinatları vb. gibi ek bilgiler almak için bu nesneye erişebiliriz.

Örnek:

function handleMouseOver(event) {  
  console.log("Mouse coordinates:", event.clientX, event.clientY);  
}  
  
<div onMouseOver={handleMouseOver}>Hover over me</div>

Bağlayıcı Olay İşleyicileri

Olay işleyicilerini donanım olarak geçirirken, bunları bileşen örneğine bağlamak önemlidir. this Bu, olay tetiklendiğinde doğru bağlamın korunmasını sağlar .

Örnek:

class MyComponent extends React.Component {  
  handleClick() {  
    console.log("Button clicked!");  
  }  
  
  render() {  
    return <button onClick={this.handleClick.bind(this)}>Click Me</button>;  
  }  
}

Olay Yayılımı ve Varsayılan Eylemleri Önleme

React olay yayılımını otomatik olarak yöneten sentetik bir olay sistemi kullanır. Form gönderme veya bağlantıda gezinme gibi varsayılan tarayıcı davranışını önlemek için yöntemi çağırabiliriz event.preventDefault().

Örnek:

function handleSubmit(event) {  
  event.preventDefault();  
  console.log("Form submitted!");  
}  
  
<form onSubmit={handleSubmit}>  
  <input type="text" />  
  <button type="submit">Submit</button>  
</form>

içinde olayların nasıl ele alınacağını anlayarak React, kullanıcı eylemlerine sorunsuz bir şekilde yanıt veren etkileşimli ve yanıt veren kullanıcı arabirimleri oluşturabilirsiniz.

İşte ortak olayların bir listesi React

1. onClick: Bu olay, bir öğe tıklandığında gerçekleşir.

Örnek:

<button onClick={handleClick}>Click Here</button>

2. onChange: Bu olay, bir giriş öğesinin(input, select, textarea) değeri değiştiğinde gerçekleşir.

Örnek:

<input type="text" onChange={handleChange} />

3. onSubmit: Bu olay, bir form gönderildiğinde gerçekleşir. Örnek:

<form onSubmit={handleSubmit}>  
  <input type="text" />  
  <button type="submit">Submit</button>  
</form>

4. onMouseEnter: Bu olay, fare işaretçisi bir öğeye girdiğinde gerçekleşir.

Örnek:

<div onMouseEnter={handleMouseEnter}>Mouse Enter Here</div>

5. onMouseLeave: Bu olay, fare işaretçisi bir öğeden ayrıldığında gerçekleşir.

Örnek:

<div onMouseLeave={handleMouseLeave}>Mouse Leave Here</div>

6. onKeyDown: Bu olay bir tuşa basıldığında meydana gelir.

Örnek:

<input type="text" onKeyDown={handleKeyDown} />

7. onKeyUp: Bu olay, bir tuş serbest bırakıldığında gerçekleşir.

Örnek:

<input type="text" onKeyUp={handleKeyUp} />

8. onFocus: Bu olay, bir öğe odağı aldığında gerçekleşir.

Örnek:

<input type="text" onFocus={handleFocus} />

9. onBlur: Bu olay, bir öğe odağı kaybettiğinde gerçekleşir.

Örnek:

<input type="text" onBlur={handleBlur} />

10. onScroll: Bu olay, bir öğe kaydırıldığında gerçekleşir.

Örnek:

<div onScroll={handleScroll}>Scrollable Content</div>

Bunlar React ,. Uygulamanızda bu eventleri kullanabilir veya ihtiyaçlarınıza göre özel eventler oluşturabilirsiniz React.