React Formlar\u0131n\u0131 Kolayca Y\u00f6netmenin 4 Ak\u0131ll\u0131 Yolu<\/p>\n
React ile form geli\u015ftirmek, ba\u015flang\u0131\u00e7ta zorlay\u0131c\u0131 gelebilir. Ancak do\u011fru teknikleri kullanarak bu s\u00fcreci olduk\u00e7a kolayla\u015ft\u0131rabilirsiniz. Bu makalede, React form y\u00f6netimini kolayla\u015ft\u0131ran d\u00f6rt ak\u0131ll\u0131 y\u00f6ntemi, \u00f6rneklerle birlikte detayl\u0131 bir \u015fekilde ele alaca\u011f\u0131z. Amac\u0131m\u0131z, form geli\u015ftirme s\u00fcrecinizi h\u0131zland\u0131rmak ve daha temiz, daha okunabilir bir kod yazman\u0131za yard\u0131mc\u0131 olmakt\u0131r. Ayr\u0131ca, s\u0131k kar\u015f\u0131la\u015f\u0131lan hatalardan ka\u00e7\u0131nman\u0131z i\u00e7in pratik ipu\u00e7lar\u0131 sunaca\u011f\u0131z.<\/p>\n
Controlled components, form verilerinin React state’i taraf\u0131ndan y\u00f6netildi\u011fi bir yakla\u015f\u0131md\u0131r. Bu y\u00f6ntem, form verilerinin her de\u011fi\u015fikli\u011finin state’i g\u00fcncellemesi ve state de\u011fi\u015fikli\u011finin de aray\u00fcze yans\u0131mas\u0131 anlam\u0131na gelir. Bu sayede, her zaman form verilerinin g\u00fcncel halini bilirsiniz. Ayr\u0131ca, form validasyonu gibi i\u015flemleri daha kolay bir \u015fekilde ger\u00e7ekle\u015ftirebilirsiniz.<\/p>\n
\nimport React, { useState } from 'react';\n\nfunction MyForm() {\n const [name, setName] = useState('');\n const [email, setEmail] = useState('');\n\n const handleSubmit = (e) => {\n e.preventDefault();\n console.log('Name:', name);\n console.log('Email:', email);\n };\n\n return (\n <form onSubmit={handleSubmit}>\n <label>\n Ad\u0131n\u0131z:\n <input type=\"text\" value={name} onChange={(e) => setName(e.target.value)} \/>\n <\/label>\n <br \/>\n <label>\n E-postan\u0131z:\n <input type=\"email\" value={email} onChange={(e) => setEmail(e.target.value)} \/>\n <\/label>\n <br \/>\n <button type=\"submit\">G\u00f6nder<\/button>\n <\/form>\n );\n}\n\nexport default MyForm;\n<\/code><\/pre>\nYukar\u0131daki \u00f6rnekte g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, input alanlar\u0131n\u0131n value \u00f6zelli\u011fi state’imizdeki de\u011ferlerle e\u015fle\u015ftirilmi\u015f ve onChange olay\u0131 state’i g\u00fcncellemek i\u00e7in kullan\u0131lm\u0131\u015ft\u0131r. Bu, form verilerinin her zaman state’de g\u00fcncel kalmas\u0131n\u0131 sa\u011flar. Sonras\u0131nda bu verileri istedi\u011finiz gibi i\u015fleyebilirsiniz.<\/p>\n
2. Uncontrolled Components: Alternatif Bir Yakla\u015f\u0131m<\/h2>\n
Controlled components’\u0131n aksine, uncontrolled components’da form verileri DOM’da saklan\u0131r. Bu y\u00f6ntem, \u00f6zellikle basit formlar i\u00e7in daha az kod gerektirir. Ancak, form verilerini kontrol etmeniz ve validasyon yapman\u0131z daha zor olabilir. Bu nedenle, karma\u015f\u0131k formlar i\u00e7in controlled components \u00f6nerilir. Burada \u00f6nemli olan, projenizin ihtiyac\u0131na en uygun y\u00f6ntemi se\u00e7mektir. Ba\u015flang\u0131\u00e7 seviyesinde, controlled components daha fazla kontrol sa\u011flad\u0131\u011f\u0131 i\u00e7in daha mant\u0131kl\u0131 bir tercih olabilir.<\/p>\n
3. Form Validasyonunu Etkin \u015eekilde Uygulamak<\/h2>\n
Form validasyonu, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek ve hatalar\u0131n \u00f6n\u00fcne ge\u00e7mek i\u00e7in \u00e7ok \u00f6nemlidir. React’te validasyon i\u00e7in \u00e7e\u015fitli k\u00fct\u00fcphaneler mevcuttur. \u00d6rne\u011fin, react-hook-form gibi k\u00fct\u00fcphaneler, form validasyonunu kolayla\u015ft\u0131rmak i\u00e7in \u00f6nceden haz\u0131rlanm\u0131\u015f fonksiyonlar sunar. Ayr\u0131ca, kendi validasyon fonksiyonlar\u0131n\u0131z\u0131 da yazabilirsiniz. Bu durumda, her bir input alan\u0131 i\u00e7in ayr\u0131 validasyon fonksiyonlar\u0131 tan\u0131mlayabilir ve onSubmit fonksiyonunda hepsini teker teker kontrol edebilirsiniz. Do\u011frulama i\u015flemleri tamamland\u0131ktan sonra, kullan\u0131c\u0131ya geri bildirim sa\u011flamay\u0131 unutmay\u0131n. \u00d6rne\u011fin, hatal\u0131 alanlar\u0131 k\u0131rm\u0131z\u0131yla i\u015faretleyebilirsiniz.<\/p>\n
4. Form Verilerini API’lara G\u00f6nderme<\/h2>\n
Form verilerini API’lara g\u00f6ndermek i\u00e7in genellikle fetch veya axios gibi k\u00fct\u00fcphaneler kullan\u0131l\u0131r. onSubmit fonksiyonu i\u00e7inde, API’ye bir istek g\u00f6ndererek verileri sunucuya iletebilirsiniz. Ba\u015far\u0131l\u0131 bir g\u00f6nderimden sonra kullan\u0131c\u0131ya bir onay mesaj\u0131 g\u00f6stermeyi unutmay\u0131n. Ayr\u0131ca, hata durumlar\u0131 i\u00e7in de kullan\u0131c\u0131 dostu mesajlar olu\u015fturman\u0131z \u00f6nemlidir. Hata y\u00f6netimi, uygulaman\u0131z\u0131n sa\u011flaml\u0131\u011f\u0131 a\u00e7\u0131s\u0131ndan kritik bir rol oynar.<\/p>\n