React.js Olay Yönetimi

React.js’de olay yönetimi, kullanıcı etkileşimlerini yakalamak ve buna tepki vermek için kullanılır. Bu, kullanıcıların bir uygulama veya web sitesi üzerinde tıklama, sürükleme, klavye girişi gibi eylemlerini algılayıp işlemek anlamına gelir. React.js’te olay yönetimi için temel yaklaşımlar:

Olay Dinleyicileri (Event Listeners): React uygulamalarında, HTML öğelerine olay dinleyicileri ekleyerek kullanıcı etkileşimlerini izleyebilirsiniz. Örneğin, bir düğmeye tıklama olayını dinlemek için onClick prop’unu kullanabilirsiniz.

function handleClick() {
  console.log('Button clicked');
}

function MyButton() {
  return <button onClick={handleClick}>Click Me</button>;
}

Olay Nesneleri (Event Objects): Bazı durumlarda, olayları işlerken olay nesnelerini kullanmanız gerekebilir. Örneğin, bir form gönderildiğinde, formun içeriğine erişmek için olay nesnesini kullanabilirsiniz.

function handleSubmit(event) {
  event.preventDefault();
  console.log('Form submitted');
}

function MyForm() {
  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

Durum Yönetimi (State Management): Olaylar genellikle bir bileşenin durumunu değiştirmek için kullanılır. Bunu yapmak için, useState veya başka bir durum yönetimi çözümü kullanarak bileşenin durumunu güncelleyebilir ve bu değişikliklere tepki verebilirsiniz.

import React, { useState } from 'react';

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

  function increment() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Olayların Yönlendirilmesi (Event Propagation): Bazı durumlarda, bir bileşen içindeki bir olayın üst bileşenlere yönlendirilmesi gerekebilir. Bu, olayların buradan oraya taşınmasını sağlayan “bubbling” veya “capturing” gibi yöntemlerle yapılabilir.

function ChildComponent({ onClick }) {
  return <button onClick={onClick}>Click Me</button>;
}

function ParentComponent() {
  function handleClick() {
    console.log('Button clicked');
  }

  return <ChildComponent onClick={handleClick} />;
}

React.js’de olay yönetimi, bileşenler arasında veri akışını ve kullanıcı etkileşimlerine tepkiyi yönetmek için önemli bir kavramdır. Yukarıdaki örnekler, temel olay yönetimi prensiplerini göstermektedir, ancak bu prensipleri daha karmaşık senaryolar için de genişletebilirsiniz.

Share on Facebook

Tweet