React ile geliştirme yaparken formlar ve form öğeleriyle çalışmak karmaşık olabilir çünkü HTML form öğeleri, React’te diğer DOM öğelerinden biraz farklı davranır.
Onay kutuları, metin alanları ve tek satırlık metin girişleri gibi formlar ve form öğeleriyle nasıl çalışılacağını öğrenin.
Formlardaki Giriş Alanlarını Yönetme
React’te, bir formdaki bir giriş alanını yönetmek, genellikle bir durum oluşturup onu giriş alanına bağlayarak gerçekleştirilir.
Örneğin:
function App() {
const [firstName, setFirstName] = React.useState(”);
function handleFirstNameChange(event) {
setFirstName( event.target.value )
}
return (
<form>
<input type=’text’ placeholder=’First Name’ onInput={handleFirstNameChange} />
</form>
)
}
Yukarıda bir firstName durumu, bir onInput olayı ve bir handleChange işleyicimiz var. handleChange işlevi, firstName durumunu güncellemek için her tuş vuruşunda çalışır .
Bu yaklaşım, bir girdi alanıyla çalışırken ideal olabilir, ancak birden çok girdi alanıyla çalışırken her girdi öğesi için farklı durumlar ve işleyici işlevleri oluşturmak tekrarlanabilir hale gelebilir.
Bu gibi durumlarda tekrarlayan ve gereksiz kod yazmaktan kaçınmak için, her giriş alanına ayrı bir ad verin, formunuzun ilk durum değeri olarak bir nesne ayarlayın ve ardından nesneyi, giriş alanlarıyla aynı adlara sahip özelliklerle doldurun.
Örneğin:
function App() {
const [formData, setFormData] = React.useState(
{
firstName: ”,
lastName: ”
}
);
return (
<form>
<input type=’text’ placeholder=’First Name’ name=’firstName’ />
<input type=’text’ placeholder=’Last Name’ name=’lastName’ />
</form>
)
}
formData , form içindeki tüm giriş alanlarını yönetmek ve güncellemek için durum değişkeni olarak hizmet edecektir . Durum nesnesindeki özelliklerin adlarının giriş öğelerinin adlarıyla aynı olduğundan emin olun.
Durumu giriş verileriyle güncellemek için giriş öğesine bir onInput olay dinleyicisi ekleyin, ardından oluşturduğunuz işleyici işlevinizi çağırın.
Örneğin:
function App() {
const [formData, setFormData] = React.useState(
{
firstName: ”,
lastName: ”
}
);
function handleChange(event) {
setFormData( (prevState) => {
return {
…prevState,
[event.target.name]: event.target.value
}
})
}
return (
<form>
<input
type=’text’
placeholder=’First Name’
name=’firstName’
onInput={handleChange}
/>
<input
type=’text’
placeholder=’Last Name’
name=’lastName’
onInput={handleChange}
/>
</form>
)
}
Yukarıdaki kod bloğu, bir onInput olayı ve bir işleyici işlevi kullandı, handleFirstNameChange . Bu handleFirstNameChange işlevi çağrıldığında durum özelliklerini güncelleyecektir. Durum özelliklerinin değerleri, karşılık gelen giriş öğelerininkilerle aynı olacaktır.
Girdilerinizi Kontrollü Bileşenlere Dönüştürme
Bir HTML formu gönderildiğinde, varsayılan davranışı tarayıcıda yeni bir sayfaya gitmektir. Bu davranış, bir forma girilen verileri doğrulamak istediğinizde olduğu gibi bazı durumlarda sakıncalıdır . Çoğu durumda, forma girilen bilgilere erişim sağlayan bir JavaScript işlevine sahip olmayı daha uygun bulacaksınız. Bu, kontrollü bileşenler kullanılarak React’te kolayca elde edilebilir.
index.html dosyalarıyla, form öğeleri durumlarının kaydını tutar ve bir kullanıcının girişine yanıt olarak durumu değiştirir. React ile set state işlevi, bileşenin state özelliğinde saklanan dinamik bir durumu değiştirir. React durumunu gerçeğin tek kaynağı yaparak iki durumu birleştirebilirsiniz. Bu şekilde, bir form oluşturan bileşen, bir kullanıcı veri girdiğinde ne olacağını kontrol eder. React’in kontrol ettiği değerlere sahip giriş formu öğeleri, kontrollü bileşenler veya kontrollü girişler olarak adlandırılır.
React uygulamanızda kontrollü girişlerden yararlanmak için, giriş öğenize bir değer prop ekleyin:
function App() {
const [formData, setFormData] = React.useState(
{
firstName: ”,
lastName: ”
}
);
function handleChange(event) {
setFormData( (prevState) => {
return {
…prevState,
[event.target.name]: event.target.value
}
})
}
return (
<form>
<input
type=’text’
placeholder=’First Name’
name=’firstName’
onInput={handleChange}
value={formData.firstName}
/>
<input
type=’text’
placeholder=’Last Name’
name=’lastName’
onInput={handleChange}
value={formData.lastName}
/>
</form>
)
}
Girdi öğelerinin değer öznitelikleri artık karşılık gelen durum özelliklerinin değeri olarak ayarlanmıştır. Kontrollü bir bileşen kullanılırken girişin değeri her zaman durum tarafından belirlenir.
Textarea Giriş Öğesini Kullanma
textarea öğesi, herhangi bir normal giriş öğesi gibidir , ancak çok satırlı girişleri tutar. Tek bir satırdan fazlasını gerektiren bilgileri aktarırken kullanışlıdır.
Bir index.html dosyasında, textarea etiket öğesi, aşağıdaki kod bloğunda görüldüğü gibi, değerini çocukları tarafından belirler:
<textarea>
Hello, How are you?
</textarea>
React ile textarea öğesini kullanmak için textarea türünde bir giriş öğesi oluşturabilirsiniz .
Şöyle:
function App() {
return (
<form>
<input type=’textarea’ name=’message’/>
</form>
)
}
Textarea’yı girdi türü olarak kullanmanın bir alternatifi , aşağıda görüldüğü gibi, girdi türü etiketi yerine textarea eleman etiketini kullanmaktır :
function App() {
return (
<form>
<textarea
name=’message’
value=’Hello, How are you?’
/>
</form>
)
}
textarea etiketi , kullanıcının textarea öğesine girilen bilgilerini tutan bir değer özelliğine sahiptir . Bu, varsayılan bir React giriş öğesi gibi çalışmasını sağlar.
React’in Checkbox Giriş Elemanı ile Çalışmak
Onay kutusu girişleriyle çalışırken işler biraz farklıdır . Tip onay kutusunun giriş alanında bir değer özelliği yoktur. Ancak, kontrol edilen bir özniteliği vardır. Bu kontrol edilen öznitelik, kutunun işaretlenip işaretlenmediğini belirlemek için bir boolean değeri gerektirerek bir değer özniteliğinden farklıdır.
Örneğin:
function App() {
return (
<form>
<input type=’checkbox’ id=’joining’ name=’join’ />
<label htmlFor=’joining’>Will you like to join our team?</label>
</form>
)
}
Etiket öğesi, htmlFor niteliğini kullanan giriş öğesinin kimliğine atıfta bulunur . Bu htmlFor niteliği, giriş öğesinin kimliğini alır – bu durumda, birleştirme. Bir HTML formu oluştururken htmlFor özniteliği , for özniteliğini temsil eder .
Onay kutusu , kontrollü bir giriş olarak kullanılması daha iyidir. Bunu, bir durum oluşturarak ve ona ilk boolean değeri olan true veya false atayarak başarabilirsiniz.
Onay kutusu giriş öğesine iki destek eklemelisiniz : bir check -in özelliği ve setIsChecked() işlevini kullanarak durumun değerini belirleyecek işleyici işlevli bir onChange olayı .
Örneğin:
function App() {
const [isChecked, setIsChecked] = React.useState(false);
function handleChange() {
setIsChecked( (prevState) => !prevState )
}
return (
<form>
<input
type=’checkbox’
id=’joining’
name=’join’
checked={isChecked}
onChange={handleChange}
/>
<label htmlFor=’joining’>Will you like to join our team?</label>
</form>
)
}
Bu kod bloğu bir isChecked durumu oluşturur ve başlangıç değerini false olarak ayarlar . isChecked’in değerini , giriş öğesindeki kontrol edilen özniteliğe ayarlar . HandleChange işlevi, onay kutusuna her tıkladığınızda tetiklenir ve isChecked’in durum değerini tersine değiştirir .
Bir form öğesi, muhtemelen onay kutuları, metin vb. gibi farklı türlerde birden çok giriş öğesi içerebilir.
Bu gibi durumlarda, aynı türdeki birden çok girdi öğesini nasıl kullandığınıza benzer şekilde bunları da işleyebilirsiniz.
İşte bir örnek:
function App() {
let[formData, setFormData] = React.useState(
{
firstName: ”
join: true,
}
);
function handleChange(event) {
const {name, value, type, checked} = event.target;
setFormData( (prevState) => {
return {
…prevState,
[name]: type === checkbox ? checked : value
}
})
}
return (
<form>
<input
type=’text’
placeholder=’First Name’
name=’firstName’
onInput={handleChange}
value={formData.firstName}
/>
<input
type=’checkbox’
id=’joining’
name=’join’
checked={formData.join}
onChange={handleChange}
/>
<label htmlFor=’joining’>Will you like to join our team?</label>
</form>
)
}
Hedef giriş tipi bir onay kutusu ise , handleChange işlevinde, setFormData’nın kontrol edilen özelliğin değerini durum özelliklerine atamak için üçlü bir işleç kullandığını unutmayın . Değilse, value özniteliğinin değerlerini atar.
Artık Tepki Formlarını Kullanabilirsiniz
Burada farklı form giriş öğelerini kullanarak React’te formlarla nasıl çalışacağınızı öğrendiniz. Onay kutularıyla çalışırken bir değer prop’u veya işaretli prop ekleyerek form öğelerinize kontrollü girdileri nasıl uygulayacağınızı da öğrendiniz.
React form giriş öğelerinin verimli bir şekilde işlenmesi, React uygulamanızın performansını iyileştirerek, her yönden daha iyi bir kullanıcı deneyimi sağlar.