React ile form işlemleri nasıl yapılır?
Bu başlık oltaya takılmış bir yemdi sizin için. Aslında burada Javascript kullanarak formların nasıl işleneceğinden bahsedeceğim. React burada sadece belirli bir yapı sunacak bize.
React sitesindeki formların çok basma kalıp bir yapıda olduğunu düşünüyorsanız veya angular kullanmanın daha iyi bir deneyim sağladığı fikrindeyseniz veya formları işlemenin en iyi yolunun ne olduğunu bilmek istiyorsanız, o zaman okumaya devam edin.
Anlatmak istediğim ilk şey DOM API’nin ne kadar güçlü olduğu ve hafife alındığıdır. DOM API kötü bir üne sahip olsa da, yine de kullanımı zorunludur. Bu yüzden DOM API’nin zorunlu doğasından soyutlanmak, yani uzaklaşmak için react, vue, angular vs.. gibi kütüphaneler ilk sırada yer almaktadır. Bu bakış açısının yeni yazılımcılar için DOM API’den uzak durulması gibi yanlış bir izlenim oluşturduğunu düşünüyorum. Belirli bir yapıya zorlayan kodlardan kaçınmalısınız ancak DOM ve Tarayıcı’nın size verdiği gücü de kucaklamalısınız.
Evet, bu kadar giriş bilgisi yeterli, şimdi derinlere dalalım..
React ile formlar nasıl oluşturulur ve sunucuya veriler nasıl gönderilir?
Hadiyin basit bir başlangıç yapalım..
En minimalist yaklaşım
Örnek:
Ve işte kodlar:
class MyForm extends React.Component {
constructor() {
super();
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
const data = new FormData(event.target);
fetch('/api/form-submit-url', {
method: 'POST',
body: data,
});
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label htmlFor="username">Enter username</label>
<input id="username" name="username" type="text" />
<label htmlFor="email">Enter your email</label>
<input id="email" name="email" type="email" />
<label htmlFor="birthdate">Enter your birth date</label>
<input id="birthdate" name="birthdate" type="text" />
<button>Send data!</button>
</form>
);
}
}onChange callbacks’i ve value özellikleri nerede mi dediniz? Neyse ki, bunları kullanmanız gerekmiyor. onSubmit callback’i hem submit butonuna tıkladığınızda hem de klavyede enter tuşuna bastığınızda çalışır. input elementine herhangi bir name anahtarı eklediğinizde, formunuza da bir yapı eklemiş olursunuz. Bu yapı mevcutta varolan FormData sınıfı (tüm tarayıcılarda ve IE10+ üzerinde desteklenir) ile serialize edilebilir. Bir form öğesinde tek yapmanız gereken, event.target özelliği ile verileri FormData sınıfına teslim etmekdir. FormData sınıfı sunucuya gönderilecek verilerin serialize edilmiş şeklini size teslim eder.
Ayrıca <button>’a da onClick eklemedik. onClick ekleseydik klavye’de enter tuşuna basılması ile form submit edilemezdi. Bu UX açısından hiç de iyi bir deneyim olmayacaktı. onSubmit event’ını kullanarak her iki duruma da cevap vermekteyiz.
FormData sınıfını kullanarak formunuzun ne kadar büyüdüğünün önemi olmayacak ve basmakalıp kodları yazmanıza da gerek kalmayacak. Sadece input taglerinizde name özelliklerini server’dakine karşılık gelecek şekilde girmeniz yeterli olacaktır.
Dikkat ederseniz react’ın “controlled components” yapısını kullanmadan gayet güzel bir yapı elde ettik. refs veya yerleşik DOM manipülasyonlarına ihtiyaç duymadık.
Yukarıdaki kod örneğini https://jsfiddle.net/everdimension/5ry2wdaa/ adresinden inceleyebilirsiniz.
Aşağıda da klasik html ile Browser DOM Api FormData() kullanarak formdan verileri okumayı görebilirsiniz. Bu yöntem en iyi yöntemler arasındadır.
<!DOCTYPE html><html> <head> <title>Parcel Sandbox</title><meta charset="UTF-8" /></head> <body><form id="fileinfo" onsubmit="deneme(event)" method="post" name="fileinfo"><label>Your email address:</label><input type="text" name="isim" /><br /><input type="submit" value="Gönder" /></form><script>function deneme(e) {e.preventDefault();var x = new FormData(fileinfo);console.log(Object.fromEntries(x));}</script></body> </html>
Bu makale https://medium.com/@everdimension/how-to-handle-forms-with-just-react-ac066c48bd4f adresinden tercüme edilmiştir.
