React İle Web Uygulamaları İçin Dinamik Bir Yazdırılabilir Anket Formu Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce sisteminizde Node.js (en az v20.x sürümü) ve bir paket yöneticisinin (npm veya pnpm) yüklü olması gerekir. React projenizi oluşturmak için Vite kullanmanızı öneririz; çünkü Vite, hızlı geliştirme ortamı ve optimize edilmiş build süreçleri ile modern standartları temsil eder.

Projenizi başlatmak için terminalinizde şu komutları kullanın:

npm create vite@latest dinamik-anket -- --template react
cd dinamik-anket
npm install
npm run dev

Bu komutlar, projenizin temel iskeletini oluşturacak ve geliştirme sunucusunu ayağa kaldıracaktır. Proje içerisinde CSS modülleri veya Tailwind CSS kullanmak, yazdırma stillerini yönetirken size büyük kolaylık sağlayacaktır.

Dinamik Anket Veri Yapısını Oluşturma

Dinamik bir form oluşturmanın ilk adımı, anket sorularını bir nesne dizisi olarak tanımlamaktır. Bu yapı, formun esnek olmasını sağlar; yani veritabanından gelen verilerle anketinizi saniyeler içinde güncelleyebilirsiniz. React state'i kullanarak bu verileri yönetmek, formun dinamik doğasını korur.

const anketSorulari = [
  { id: 1, soru: "Adınız Soyadınız", tip: "text" },
  { id: 2, soru: "Memnuniyet Düzeyiniz", tip: "select", secenekler: ["İyi", "Orta", "Kötü"] },
  { id: 3, soru: "Eklemek İstedikleriniz", tip: "textarea" }
];

Bu dizi, form bileşenlerimizi render etmek için kullanacağımız "kaynak kod" görevini görür. Her bir nesne, form elemanının türünü ve içeriğini tanımlar.

Form Bileşenlerini Dinamik Olarak Render Etme

Tanımladığımız diziyi kullanarak form elemanlarını ekrana basmak için map fonksiyonunu kullanacağız. Bu yöntem, formunuzu manuel olarak yazmak yerine, veri yapısına bağlı kalarak otomatik oluşturmanızı sağlar. Böylece yeni bir soru eklemek istediğinizde sadece diziyi güncellemeniz yeterli olur.

const AnketFormu = ({ sorular, veriler, setVeriler }) => {
  return (
    
      {sorular.map((s) => (
        

          {s.soru}
          {s.tip === "text" &&  setVeriler({...veriler, [s.id]: e.target.value})} />}
          {s.tip === "select" && (
             setVeriler({...veriler, [s.id]: e.target.value})}>
              {s.secenekler.map(opt => {opt})}
            
          )}
        
      ))}
    
  );
};

Burada setVeriler fonksiyonu ile kullanıcının girdiği verileri bir state içerisinde topluyoruz. Bu state, hem formun güncel kalmasını sağlar hem de yazdırılacak verinin kaynağını oluşturur.

CSS ile Yazdırma Stillerini Optimize Etme

Web sayfasını yazdırırken, ekran tasarımındaki gereksiz öğeleri (butonlar, menüler, reklamlar) kaldırmanız gerekir. CSS'de @media print sorgusu, sadece yazdırma anında geçerli olan stilleri tanımlamanıza olanak tanır. Bu, profesyonel bir çıktı almanın anahtarıdır.

@media print {
  .yazdirma-gizle { display: none; }
  .anket-form { width: 100%; }
  body { font-size: 12pt; }
}

Bu stil bloğu, yazdirma-gizle sınıfına sahip tüm öğeleri yazdırma sırasında gizler. Formunuzun temiz ve kağıda uygun görünmesi için bu sınıfı "Yazdır" butonlarına eklemeyi unutmayın.

React İle Yazdırma Fonksiyonunu Tetikleme

Kullanıcının anketi tamamladıktan sonra "Yazdır" butonuna basmasıyla tarayıcının yazdırma penceresini açan basit bir fonksiyon yazacağız. React içerisinde window.print() metodunu çağırmak, tarayıcının o anki DOM yapısını yazdırma moduna sokar.

const YazdirButonu = () => {
  const handlePrint = () => {
    window.print();
  };

  return (
    
      Formu Yazdır
    
  );
};

Bu buton, formun altına yerleştirilmeli ve yazdirma-gizle sınıfı ile tanımlanmalıdır. Böylece yazdırılan kağıtta "Yazdır" butonu görünmeyecektir.

Yöntem Karşılaştırması

Güvenlik Uyarısı: Kullanıcıdan alınan verileri yazdırma öncesinde mutlaka XSS (Cross-Site Scripting) saldırılarına karşı sanitize edin. Dinamik olarak render edilen input değerlerini doğrudan HTML olarak basmak yerine React'in güvenli veri bağlama yöntemlerini kullanın.

Sıkça Sorulan Sorular

Yazdırırken formdaki input değerleri neden görünmüyor?

Modern tarayıcılar, input alanlarının o anki değerini yazdırma önizlemesine her zaman yansıtmayabilir. Bunu çözmek için yazdırma anında input değerlerini bir span veya div içine kopyalayan bir "yazdırma görünümü" oluşturmanız gerekebilir.

Yazdırma sayfa yapısını (A4) nasıl sabitlerim?

CSS içerisinde @page { size: A4; margin: 20mm; } kurallarını kullanarak kağıt boyutunu ve kenar boşluklarını sabitleyebilirsiniz.

Mobil cihazlarda yazdırma çalışır mı?

Mobil tarayıcıların yazdırma desteği kısıtlıdır. Kullanıcıların mobil cihazlarda PDF olarak kaydetmelerini sağlamak en iyi pratiktir.

Verileri yazdırmadan önce sunucuya göndermeli miyim?

Eğer verinin kalıcı olmasını istiyorsanız, yazdırma işleminden hemen önce bir API çağrısı ile veriyi veritabanına kaydetmeniz önerilir.

Yazdırma sırasında logo veya özel başlık ekleyebilir miyim?

Evet, @media print içerisinde sadece yazdırılacak kısma özel bir header bileşeni ekleyerek bunu sağlayabilirsiniz.

İleri Seviye Optimizasyon: Büyük Ölçekli Anketlerde Performans Yönetimi

Dinamik anket formlarınızdaki soru sayısı arttıkça, React'in yeniden render (re-render) süreçleri performans darboğazlarına yol açabilir. Özellikle kullanıcı her bir input alanına veri girdiğinde tüm formun tekrar hesaplanması, tarayıcıda takılmalara neden olabilir. Bu durumu engellemek için React.memo ve useCallback gibi optimizasyon araçlarını stratejik kullanmalısınız.

Aşağıdaki örnekte, her bir soru bileşenini izole ederek gereksiz render işlemlerini nasıl engelleyeceğinizi görebilirsiniz:

import React, { memo, useCallback } from 'react';

const QuestionField = memo(({ question, onChange }) => {
  console.log(`Render ediliyor: ${question.id}`);
  return (
    

      {question.label}
       onChange(question.id, e.target.value)} 
      />
    
  );
});

// Ana bileşende kullanımı
const SurveyForm = () => {
  const handleInputChange = useCallback((id, value) => {
    // State güncelleme mantığı
  }, []);

  return (
    
      {questions.map(q => (
        
      ))}
    
  );
};

Hata Ayıklama ve Yazdırma Önizleme Sorunlarını Giderme

Yazdırma süreçlerinde en sık karşılaşılan sorun, CSS stillerinin yazdırma modunda (print media) beklenmedik şekilde davranmasıdır. Tarayıcıların yazdırma motorları, standart ekran CSS'inden farklı kurallar uygular. Hata ayıklama sürecini hızlandırmak için şu adımları izleyebilirsiniz:

• Chrome Geliştirici Araçları: F12 tuşuna basıp "Rendering" sekmesine gidin ve "Emulate CSS media type" seçeneğini "print" olarak ayarlayın. Bu, yazdırma stillerini gerçek zamanlı olarak tarayıcı üzerinde görmenizi sağlar.
• Sayfa Kesmeleri (Page Breaks): Uzun anketlerde, bir sorunun yarısının bir sayfada, diğer yarısının bir sonraki sayfada kalmasını önlemek için break-inside: avoid; kuralını kullanın.

@media print {
  .question-wrapper {
    break-inside: avoid;
    margin-bottom: 20px;
    page-break-inside: avoid;
  }
}

Eğer yazdırma sırasında bazı elementlerin kaydığını fark ederseniz, yazdırma alanını @page kuralı ile sınırlayarak kenar boşluklarını (margins) sıfırlayıp, kendi padding değerlerinizle kontrolü ele almanız önerilir:

@media print {
  @page {
    size: A4;
    margin: 1cm;
  }
  body {
    -webkit-print-color-adjust: exact; /* Arka plan renklerinin yazdırılmasını sağlar */
  }
}

Bu teknikler, kullanıcının elinde tuttuğu fiziksel çıktının, dijital formunuzla birebir uyumlu ve profesyonel görünmesini sağlayacaktır.

Sonuç

React ile dinamik bir yazdırılabilir anket formu oluşturmak, bileşen mantığını ve CSS yazdırma kurallarını birleştirdiğinizde oldukça verimli bir süreçtir. Bu rehberde, veriyi nasıl yapılandıracağınızı, formu dinamik nasıl render edeceğinizi ve yazdırma stillerini nasıl yöneteceğinizi öğrendiniz. Bir sonraki adımda, oluşturduğunuz bu formu PDF çıktısı alabilen daha gelişmiş kütüphanelerle (örneğin jsPDF) entegre etmeyi deneyebilirsiniz.

Kodlarınızın güvenliğini sağlamak için her zaman kullanıcı girişlerini doğrulamayı ve üretim ortamına almadan önce farklı tarayıcılarda yazdırma önizlemelerini test etmeyi unutmayın.