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:
işlevUygulama() {const [ilkAdı, setFirstName] = React.useState('');
işlevtanıtıcıİlkAdıDeğiştir(etkinlik) {
setFirstName( etkinlik.hedef.değer )
}
geri dönmek (
<biçim>
<giriş türü='metin' yer tutucu='İlk adı' onInput={handleFirstNameChange} />
</form>
)
}
Yukarıda bir ilk adı devlet, bir onInput olay ve bir koluDeğiştir işleyici bu koluDeğiştir güncellemek için her tuş vuruşunda çalışır. ilk adı durum.
Bu yaklaşım, bir girdi alanıyla çalışırken, ancak farklı durumlar ve Birden çok girdiyle çalışırken her girdi öğesi için işleyici işlevleri tekrarlanır hale gelirdi. alanlar.
Bu gibi durumlarda tekrarlayan ve gereksiz kod yazmaktan kaçınmak için her giriş alanına ayrı bir ad verin, bir nesne ayarlayın. formunuzun ilk durum değeri olarak girin ve ardından nesneyi girişle aynı adlara sahip özelliklerle doldurun alanlar.
Örneğin:
işlevUygulama() {sabit [formData, setFormData] = React.useState(
{
ilk adı: '',
soy isim: ''
}
);
geri dönmek (
<biçim>
<giriş türü='metin' yer tutucu='İlk adı' isim='ilk adı' />
<giriş türü='metin' yer tutucu='Soy isim' isim='soy isim' />
</form>
)
}
bu form verisi 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 bir onInput olay dinleyicisini giriş öğesine bağlayın, ardından oluşturduğunuz işleyici işlevinizi çağırın.
Örneğin:
işlevUygulama() {sabit [formData, setFormData] = React.useState(
{
ilk adı: '',
soy isim: ''
}
);
işlevkoluDeğiştir(etkinlik) {
setFormData( (prevState) => {
geri dönmek {
...prevDevlet,
[olay.hedef.adı]: etkinlik.hedef.değer
}
})
}
geri dönmek (
<biçim>
<giriş
tür='metin'
yer tutucu='İlk adı'
isim='ilk adı'
onInput={handleChange}
/>
<giriş
tür='metin'
yer tutucu='Soy isim'
isim='soy isim'
onInput={handleChange}
/>
</form>
)
}
Yukarıdaki kod bloğu bir onInput olay ve işleyici işlevi, tanıtıcıİlkAdıDeğiştir. Bu tanıtıcıİlkAdıDeğiştir 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ış, istediğiniz zaman olduğu gibi bazı durumlarda sakıncalıdır. bir forma girilen verileri doğrulamak. Ç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:
işlevUygulama() {sabit [formData, setFormData] = React.useState(
{
ilk adı: '',
soy isim: ''
}
);
işlevkoluDeğiştir(etkinlik) {
setFormData( (prevState) => {
geri dönmek {
...prevDevlet,
[olay.hedef.adı]: etkinlik.hedef.değer
}
})
}
geri dönmek (
<biçim>
<giriş
tür='metin'
yer tutucu='İlk adı'
isim='ilk adı'
onInput={handleChange}
değer={formData.firstName}
/>
<giriş
tür='metin'
yer tutucu='Soy isim'
isim='soy isim'
onInput={handleChange}
değer={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
bu metin alanı öğ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, metin alanı etiketi element, aşağıdaki kod bloğunda görüldüğü gibi değerini çocukları tarafından belirler:
<metin alanı>
Nasılsın?
</textarea>
React ile kullanmak için metin alanı öğesi, türüyle bir giriş öğesi oluşturabilirsiniz. metin alanı.
Şöyle:
işlevUygulama() {geri dönmek (
<biçim>
<giriş türü='metin alanı' isim='İleti'/>
</form>
)
}
kullanmanın bir alternatifi metin alanı bir giriş türü olarak kullanmaktır metin alanı aşağıda görüldüğü gibi giriş tipi etiketinin yerine eleman etiketi:
işlevUygulama() {geri dönmek (
<biçim>
<metin alanı
isim='İleti'
değer='Nasılsın?'
/>
</form>
)
}
bu metin alanı etiketi, kullanıcının girilen bilgilerini tutan bir değer özelliğine sahiptir. metin alanı eleman. Bu, varsayılan bir React giriş öğesi gibi çalışmasını sağlar.
React'in Checkbox Giriş Elemanı ile Çalışmak
ile çalışırken işler biraz farklı onay kutusu girişler. Türün giriş alanı onay kutusu bir değer özelliğine sahip değildir. Ancak, bir kontrol bağlanmak. Bu kontrol öznitelik, kutunun işaretli olup olmadığını belirlemek için bir boolean değeri gerektirerek bir değer özniteliğinden farklıdır.
Örneğin:
işlevUygulama() {geri dönmek (
<biçim>
<giriş türü='onay kutusu' kimlik='birleştirme' isim='katılmak' />
<etiket htmlFor='birleştirme'>Ekibimize katılmak ister misiniz?</label>
</form>
)
}
Etiket öğesi, şunu kullanan giriş öğesinin kimliğine karşılık gelir: htmlİçin bağlanmak. Bu htmlİçin öznitelik giriş öğesinin kimliğini alır—bu durumda, birleştirme. Ne zaman HTML formu oluşturma, htmlİçin nitelik temsil eder için bağlanmak.
bu onay kutusu kontrollü bir girdi olarak kullanılması daha iyidir. Bunu, bir durum oluşturarak ve ona ilk boolean değeri olan true veya false atayarak başarabilirsiniz.
Üzerine iki sahne eklemelisiniz onay kutusu giriş elemanı: bir kontrol mülkiyet ve bir onChange kullanarak durumun değerini belirleyecek bir işleyici işlevine sahip olay. setIsChecked() işlev.
Örneğin:
işlevUygulama() {sabit [isChecked, setIsChecked] = React.useState(YANLIŞ);
işlevkoluDeğiştir() {
setIsChecked( (prevState) => !prevDevlet )
}
geri dönmek (
<biçim>
<giriş
tür='onay kutusu'
kimlik='birleştirme'
isim='katılmak'
kontrol edildi={isChecked}
onChange={handleChange}
/>
<etiket htmlFor='birleştirme'>Ekibimize katılmak ister misiniz?</label>
</form>
)
}
Bu kod bloğu bir Kontrol edildi durumu ve başlangıç değerini şu şekilde ayarlar: YANLIŞ. değerini ayarlar Kontrol edildi için kontrol giriş öğesindeki öznitelik. bu koluDeğiştir işlev ateşlenecek ve durum değerini değiştirecektir. Kontrol edildi onay kutusunu tıkladığınızda tam tersi.
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:
işlevUygulama() {izin vermek[formData, setFormData] = React.useState(
{
ilk adı: ''
katılmak: doğru,
}
);
işlevkoluDeğiştir(etkinlik) {
sabit {isim, değer, tip, kontrol edildi} = event.target;
setFormData( (prevState) => {
geri dönmek {
...prevDevlet,
[isim]: tip onay kutusu? işaretli: değer
}
})
}
geri dönmek (
<biçim>
<giriş
tür='metin'
yer tutucu='İlk adı'
isim='ilk adı'
onInput={handleChange}
değer={formData.firstName}
/>
<giriş
tür='onay kutusu'
kimlik='birleştirme'
isim='katılmak'
kontrol edildi={formData.join}
onChange={handleChange}
/>
<etiket htmlFor='birleştirme'>Ekibimize katılmak ister misiniz?</label>
</form>
)
}
Şuna dikkat edin: koluDeğiştir işlev, setFormData değerini atamak için üçlü bir operatör kullanır. kontrol özelliği, durum özelliklerine, hedef giriş türü ise onay kutusu. Değilse, değerleri atar değer bağlanmak.
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.