React Formlar: Kullanıcı Girişleriyle Etkileşim

Bugün, React Formlar konusuna bakacağız ve React ile form kullanımını keşfedeceğiz. Formlar, kullanıcının girdiği verileri almak ve işlemek için önemli bir araçtır. React, form işlemlerini kolaylaştıran componentler ve olaylar sunar. İki örnek üzerinden form kullanımını inceleyeceğiz. Her iki örnekte de formun gönderilmesi durumunda sonuçları console’a yazdıracağız.

Ilk olarak aşağıdaki bazı form elemanlarına göz atalım.

Metin girişi (Text input)
Seçenekler (Select/Options)
Butonlar (Buttons)
Onay kutuları (Checkboxes)
Seçimler (Radio buttons)
Renk seçimi (Color picker)
Checkbox (Checkbox)

Şimdi bu elemanları örneklerimizde kullanarak formlar oluşturalım ve form aracılığı ile kullanıcıdan aldığımız verileri console’da görelim.

Örnek 1 Form İçinde Metin Girişi, Seçenekler, Renk Seçimi ve Checkbox

İlk örneğimizde text input, select/options, color picker ve checkbox kullanarak kullanıcıdan veri almayı ele alalım.

Aşağıdaki formda ad, e-posta, cinsiyet, favori renk, ve ilgi alanları bulunmaktadır.

import { useState } from "react";
const FormExample = () => {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [gender, setGender] = useState("");
const [favoriteColor, setFavoriteColor] = useState("#000000");
const [interests, setInterests] = useState([]);
const handleSubmit = (e) => {
e.preventDefault();
console.log("Ad: ", name);
console.log("E-posta: ", email);
console.log("Cinsiyet: ", gender);
console.log("Favori Renk: ", favoriteColor);
console.log("İlgi Alanları: ", interests);
};
const handleCheckboxChange = (e) => {
const value = e.target.value;
if (interests.includes(value)) {
setInterests(interests.filter((item) => item !== value));
} else {
setInterests([...interests, value]);
}
};
return (
<>
<h2>Mehsatek ile React Formlar</h2>
<form onSubmit={handleSubmit}>
<label>
Ad:
<input type="text" value={name} onChange={(e) => setName(e.target.value)} />
</label>
<br /> <br />
<label>
E-posta:
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
</label>
<br /> <br />
<label>
Cinsiyet:
<select value={gender} onChange={(e) => setGender(e.target.value)}>
<option value="">Seçiniz</option>
<option value="erkek">Erkek</option>
<option value="kadın">Kadın</option>
</select>
</label>
<br /> <br />
<label>
Favori Renk:
<input
type="color"
value={favoriteColor}
onChange={(e) => setFavoriteColor(e.target.value)}
/>
</label>
<br /> <br />
<label>
İlgi Alanları:
<div>
<label>
<input type="checkbox" value="spor" onChange={handleCheckboxChange} />
Spor
</label>
<label>
<input type="checkbox" value="müzik" onChange={handleCheckboxChange} />
Müzik
</label>
<label>
<input type="checkbox" value="sanat" onChange={handleCheckboxChange} />
Sanat
</label>
</div>
</label>
<br /> <br />
<button type="submit">Gönder</button>
</form>
</>
);
};
export default FormExample;

import { useState } from "react";

const FormExample = () => {

const [name, setName] = useState("");

const [email, setEmail] = useState("");

const [gender, setGender] = useState("");

const [favoriteColor, setFavoriteColor] = useState("#000000");

const [interests, setInterests] = useState([]);

const handleSubmit = (e) => {

e.preventDefault();

console.log("Ad: ", name);

console.log("E-posta: ", email);

console.log("Cinsiyet: ", gender);

console.log("Favori Renk: ", favoriteColor);

console.log("İlgi Alanları: ", interests);

};

const handleCheckboxChange = (e) => {

const value = e.target.value;

if (interests.includes(value)) {

setInterests(interests.filter((item) => item !== value));

} else {

setInterests([...interests, value]);

}

};

return (

<h2>Mehsatek ile React Formlar</h2>

<label>

Ad:

<input type="text" value={name} onChange={(e) => setName(e.target.value)} />

</label>

<label>

E-posta:

<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />

</label>

<label>

Cinsiyet:

<select value={gender} onChange={(e) => setGender(e.target.value)}>

<option value="">Seçiniz</option>

<option value="erkek">Erkek</option>

<option value="kadın">Kadın</option>

</select>

</label>

<label>

Favori Renk:

<input

type="color"

value={favoriteColor}

onChange={(e) => setFavoriteColor(e.target.value)}

</label>

<label>

İlgi Alanları:

<div>

<label>

Spor

</label>

<label>

Müzik

</label>

<label>

Sanat

</label>

</div>

</label>

<button type="submit">Gönder</button>

</form>

</>

);

};

export default FormExample;

⇒ Yukarıdaki örnekte, useState hook’unu kullanarak name, email, gender, favoriteColor ve interests durumlarını tanımlıyoruz. Eğer state kullanımı ile ilgili yeterli bilginiz yoksa aşağıdaki bağlantıdan React state kullanımına göz atabilirsiniz.

React State Nedir? React State Kullanımı

⇒ handleSubmit fonksiyonu form gönderildiğinde çağrılır ve sonuçları konsola yazdırır. handleCheckboxChange fonksiyonu ise ilgi alanlarının seçimini yönetir.

⇒ Form componentimizde, onSubmit olayını kullanarak handleSubmit fonksiyonunu formun gönderme olayına bağlıyoruz. Her bir giriş alanı için value özelliğini durum değeriyle bağlayarak kullanıcının girdisini takip ediyoruz. onChange olayıyla her bir değişiklikte durumu güncelliyoruz.

Çıktı:

Örnek 2 Form İçinde Metin Alanı, Checkbox ve Radio Button

İkinci örneğimizde textarea, checkbox ve radio button kullanarak kullanıcıdan veri almayı ele alalım.

import { useState } from "react";
const FormExample = () => {
const [message, setMessage] = useState("");
const [isSubscribed, setIsSubscribed] = useState(false);
const [paymentMethod, setPaymentMethod] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
console.log("Mesaj: ", message);
console.log("Abonelik Durumu: ", isSubscribed);
console.log("Ödeme Yöntemi: ", paymentMethod);
};
return (
<form onSubmit={handleSubmit}>
<label>
Mesaj:
<textarea value={message} onChange={(e) => setMessage(e.target.value)} />
</label>
<br /> <br />
<label>
Abonelik:
<input
type="checkbox"
checked={isSubscribed}
onChange={(e) => setIsSubscribed(e.target.checked)}
/>
</label>
<br /> <br />
<label>
Ödeme Yöntemi:
<div>
<label>
<input
type="radio"
value="kredi kartı"
checked={paymentMethod === "kredi kartı"}
onChange={(e) => setPaymentMethod(e.target.value)}
/>
Kredi Kartı
</label>
<br /> <br />
<label>
<input
type="radio"
value="nakit"
checked={paymentMethod === "nakit"}
onChange={(e) => setPaymentMethod(e.target.value)}
/>
Nakit
</label>
</div>
</label>
<br /> <br />
<button type="submit">Gönder</button>
</form>
);
};
export default FormExample;

import { useState } from "react";

const FormExample = () => {

const [message, setMessage] = useState("");

const [isSubscribed, setIsSubscribed] = useState(false);

const [paymentMethod, setPaymentMethod] = useState("");

const handleSubmit = (e) => {

e.preventDefault();

console.log("Mesaj: ", message);

console.log("Abonelik Durumu: ", isSubscribed);

console.log("Ödeme Yöntemi: ", paymentMethod);

};

return (

<label>

Mesaj:

<textarea value={message} onChange={(e) => setMessage(e.target.value)} />

</label>

<label>

Abonelik:

<input

type="checkbox"

checked={isSubscribed}

onChange={(e) => setIsSubscribed(e.target.checked)}

</label>

<label>

Ödeme Yöntemi:

<div>

<label>

<input

type="radio"

value="kredi kartı"

checked={paymentMethod === "kredi kartı"}

onChange={(e) => setPaymentMethod(e.target.value)}

Kredi Kartı

</label>

<label>

<input

type="radio"

value="nakit"

checked={paymentMethod === "nakit"}

onChange={(e) => setPaymentMethod(e.target.value)}

Nakit

</label>

</div>

</label>

<button type="submit">Gönder</button>

</form>

);

};

export default FormExample;

⇒ Yukarıdaki örnekte, useState hook’unu kullanarak message, isSubscribed ve paymentMethod durumlarını tanımlıyoruz. handleSubmit fonksiyonu form gönderildiğinde çağrılır ve sonuçları konsola yazdırır.

⇒ Form bileşenimizde, onSubmit olayını kullanarak handleSubmit fonksiyonunu formun gönderme olayına bağlıyoruz. Metin alanı için value özelliğini durum değeriyle bağlayarak kullanıcının girdisini takip ediyoruz. Checkbox için checked özelliğini durum değeriyle bağlıyoruz ve onChange olayıyla durumu güncelliyoruz. Radio butonlar için checked özelliğini durum değeriyle bağlıyoruz ve onChange olayıyla durumu güncelliyoruz.

Çıktı:

React formlarında, kullanıcıdan metin girişi (text input), seçenekler (select/options), butonlar (buttons), onay kutuları (checkboxes), seçimler (radio buttons), renk seçimi (color picker) gibi farklı veri türlerini alabilirsiniz.

Umarım “React Formlar: Kullanıcı Girişleriyle Etkileşim” başlıklı yazım sizin için faydalı olmuştur. Form kullanımı ile ilgili sorunuz olursa yorum kısmından sormayı unutmayın.

Şu yazılar da ilginizi çekebilir.

React Events (Olaylar) Nedir? React Event Kullanımı

Kaynaklar

react.dev

w3schools.com

React Formlar: Kullanıcı Girişleriyle Etkileşim

Kaynaklar

Yazar Hakkında

2 Yorum

Yorum Yazın

Kaynaklar

Benzer Yazılar

Yazar Hakkında

2 Yorum

Yorum Yazın