React’te Form Do\u011frulama: Ba\u015flang\u0131\u00e7 Seviyesi<\/p>\n
Merhaba! Ben Fatih Soysal ve bu makalede React’te form do\u011frulaman\u0131n temellerini, \u00f6zellikle de ba\u015flang\u0131\u00e7 seviyesindeki geli\u015ftiriciler i\u00e7in, ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131m. Form do\u011frulama, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek ve veri b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc sa\u011flamak i\u00e7in kritik bir ad\u0131md\u0131r. Bu s\u00fcre\u00e7te React’in g\u00fc\u00e7l\u00fc durum y\u00f6netim mekanizmalar\u0131n\u0131 kullanaca\u011f\u0131z. \u00d6ncelikle temel kavramlar\u0131 anlayarak ba\u015flayal\u0131m.<\/p>\n
React’te durum (state), bile\u015fenlerin i\u00e7indeki verileri temsil eder ve bu verilerdeki de\u011fi\u015fiklikler, bile\u015fenin yeniden render edilmesine neden olur. Durum y\u00f6netimi ise, bu verileri d\u00fczenli ve etkili bir \u015fekilde y\u00f6netme sanat\u0131d\u0131r. Form do\u011frulamada, kullan\u0131c\u0131 giri\u015flerini, do\u011frulama durumlar\u0131n\u0131 ve hata mesajlar\u0131n\u0131 takip etmek i\u00e7in durum y\u00f6netimine ihtiya\u00e7 duyar\u0131z. \u00d6rne\u011fin, bir email alan\u0131n\u0131n do\u011fru olup olmad\u0131\u011f\u0131n\u0131 veya bir \u015fifre alan\u0131n\u0131n minimum uzunluk gereksinimlerini kar\u015f\u0131lay\u0131p kar\u015f\u0131lamad\u0131\u011f\u0131n\u0131 takip etmeliyiz. Bu veriler, bile\u015fenimizin durumunu olu\u015fturur.<\/p>\n
\u015eimdi, basit bir email do\u011frulama \u00f6rne\u011fi ile durumu inceleyelim. A\u015fa\u011f\u0131daki kodda, bir email giri\u015f alan\u0131m\u0131z ve bunun durumunu y\u00f6neten bir bile\u015fenimiz var:<\/p>\n
\nimport React, { useState } from 'react';\n\nfunction EmailForm() {\n const [email, setEmail] = useState('');\n const [emailError, setEmailError] = useState('');\n\n const handleEmailChange = (e) => {\n const emailValue = e.target.value;\n setEmail(emailValue);\n \/\/ Email do\u011frulama regex'i\n const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n if (emailRegex.test(emailValue)) {\n setEmailError('');\n } else {\n setEmailError('Ge\u00e7erli bir email adresi giriniz.');\n }\n };\n\n return (\n \n \n {emailError && {emailError}<\/p>}\n