İletişim formları, web sitelerinde ziyaretçilerin geri bildirimde bulunmasını veya bilgi talep etmesini sağlayan önemli araçlardır. Bu gönderide, React kullanarak basit bir iletişim formu nasıl oluşturulacağını ve yönetileceğini adım adım öğreneceğiz.

Adım 1: useState Hook'u Kullanarak State Oluşturma İletişim formundaki girdilerin değerlerini saklamak için useState hook'u kullanılır. Bu sayede, form girdileri güncellendiğinde bu değerler state içinde güncellenir.

import { useState } from "react";

function ContactPage() {
  const [formData, setFormData] = useState({
    email: "",
    subject: "",
    message: "",
  });

  // ...
}

Adım 2: handleChange Fonksiyonunu Tanımlama Herhangi bir form girdisinin değeri değiştiğinde çağrılacak olan handleChange fonksiyonu, form girdisinin adı ve değeri alarak formData state'ini günceller.

const handleChange = (event: any) => {
  const { name, value } = event.target;
  setFormData({
    ...formData,
    [name]: value,
  });
};

Adım 3: handleSubmit Fonksiyonunu Tanımlama Form gönderildiğinde çağrılacak olan handleSubmit fonksiyonu, formun varsayılan davranışını engeller ve form verilerini konsola yazdırır.

const handleSubmit = (event: any) => {
  event.preventDefault();
  console.log(formData);
};

Adım 4: Formu Oluşturma Son adımda, oluşturduğumuz handleChange ve handleSubmit fonksiyonlarını kullanarak iletişim formunu oluşturuyoruz.

return (
  <>
    <section className="bg-white dark:bg-gray-900">
      <div className="py-8 lg:py-16 px-4 mx-auto max-w-screen-md">
        <h2 className="mb-4 text-4xl tracking-tight font-extrabold text-center text-gray-900 dark:text-white">
          Contact Us
        </h2>
        {/* Diğer HTML içeriği */}
        <form onSubmit={handleSubmit} className="space-y-8">
          {/* Email, subject ve message inputları */}
          {/* Submit butonu */}
        </form>
      </div>
    </section>
  </>
);

Tüm adımları tamamladıktan sonra kodlarımız aşağıdaki gibi olacak;

import { useState } from "react";

function ContactPage() {

  const [formData, setFormData] = useState({
    email: "",
    subject: "",
    message: "",
  });

  const handleChange = (event: any) => {
    const { name, value } = event.target
    setFormData({
      ...formData,
      [name]: value,
    });
  }

  const handleSubmit = (event: any) => {
    event.preventDefault();
    console.log(formData);
  }
  
  return (
    <>
      <section className="bg-white dark:bg-gray-900">
        <div className="py-8 lg:py-16 px-4 mx-auto max-w-screen-md">
          <h2 className="mb-4 text-4xl tracking-tight font-extrabold text-center text-gray-900 dark:text-white">
            Contact Us
          </h2>
          <p className="mb-8 lg:mb-16 font-light text-center text-gray-500 dark:text-gray-400 sm:text-xl">
            Got a technical issue? Want to send feedback about a beta feature?
            Need details about our Business plan? Let us know.
          </p>
          <form onSubmit={handleSubmit} className="space-y-8">
            <div>
              <label
                htmlFor="email"
                className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
              >
                Your email
              </label>
              <input
                type="email"
                id="email"
                name="email"
                onChange={handleChange}
                className="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
                placeholder="[email protected]"
                required
              />
            </div>
            <div>
              <label
                htmlFor="subject"
                className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
              >
                Subject
              </label>
              <input
                type="text"
                id="subject"
                name="subject"
                onChange={handleChange}
                className="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
                placeholder="Let us know how we can help you"
                required
              />
            </div>
            <div className="sm:col-span-2">
              <label
                htmlFor="message"
                className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
              >
                Your message
              </label>
              <textarea
                id="message"
                name="message"
                onChange={handleChange}
                rows={6}
                className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                placeholder="Leave a comment..."
              ></textarea>
            </div>
            <button
              type="submit"
              className="py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-blue-700 sm:w-fit hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
            >
              Send message
            </button>
          </form>
        </div>
      </section>
    </>
  );
}

export default ContactPage;

Sonuç: Bu adımları izleyerek, React kullanarak basit formlar oluşturabilir ve form verilerini yönetebilirsiniz. Bu, web sitenizin ziyaretçileriyle etkili bir şekilde iletişim kurmanın harika bir yoludur.