React uygulamalarında kullanıcıdan alınan form verilerinin yönetilmesi oldukça önemlidir. Controlled component yaklaşımı ile form elemanlarının değerleri React state'inde tutulur ve bu sayede formun kontrolü tamamen React tarafından sağlanır.

Controlled Component Nedir?

Controlled component, form elemanlarının değerlerinin React state tarafından kontrol edildiği durumlardır. Böylece input, textarea, select gibi elemanlar değerleri doğrudan state üzerinden alır ve güncellenir.

Basit Bir Form Örneği

Aşağıdaki örnek, kullanıcı adı ve e-posta bilgisi alan basit bir formu göstermektedir. React useState hook'u ile form elemanlarının değerleri yönetilmektedir.

import React, { useState } from 'react';

function UserForm() {
  const [formData, setFormData] = useState({
    username: '',
    email: ''
  });

  // Inputlardaki değişiklikleri yakalama fonksiyonu
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value
    }));
  };

  // Form submit işlemi
  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Kullanıcı Adı: ${formData.username}\nEmail: ${formData.email}`);
    // Burada API çağrısı veya başka işlemler yapılabilir
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="username">Kullanıcı Adı:</label>
        <input 
          type="text" 
          id="username" 
          name="username" 
          value={formData.username} 
          onChange={handleChange} 
          placeholder="Kullanıcı adınızı girin" 
          required 
        />
      </div>

      <div>
        <label htmlFor="email">E-posta:</label>
        <input 
          type="email" 
          id="email" 
          name="email" 
          value={formData.email} 
          onChange={handleChange} 
          placeholder="Email adresinizi girin" 
          required 
        />
      </div>

      <button type="submit">Gönder</button>
    </form>
  );
}

export default UserForm;

Nasıl Çalışır?

• React state içinde ilk olarak formData objesi oluşturulur. Bu objede username ve email değerleri tutulur.
• Her input alanına value parametresi olarak state içindeki ilgili değer atanır.
• onChange olayı her değişiklikte tetiklenir ve handleChange fonksiyonu çağrılır.
  • handleChange, event target'ından name ve value'yu alır.
  • setFormData ile önceki state korunarak sadece ilgili name property'si güncellenir.
• Form gönderildiğinde handleSubmit fonksiyonu tetiklenir, sayfa yenilenmesi engellenir ve uyarı kutusunda girilen bilgiler gösterilir.

Özet

React ile form verilerini yönetmek için controlled component kullanmak en sağlıklı yöntemdir. Bu sayede her input alanının değeri React state'de kontrol edilir ve formlar daha kolay yönetilebilir. Ayrıca validation, dinamik inputlar ve kompleks formlar geliştirmek için de bu yöntem oldukça kullanışlıdır.