Рад са обрасцима и елементима обрасца при развоју помоћу Реацт-а може бити сложен јер се ХТМЛ елементи обрасца понашају нешто другачије у Реацт-у од осталих ДОМ елемената.
Научите како да радите са обрасцима и елементима обрасца као што су поља за потврду, текстуална поља и једноредни унос текста.
Управљање пољима за унос у обрасцима
У Реацт-у, управљање пољем за унос у форми се често постиже креирањем стања и повезивањем са пољем за унос.
На пример:
функцијаАпликација() {цонст [фирстНаме, сетФирстНаме] = Реацт.усеСтате('');
функцијахандлеФирстНамеЦханге(догађај) {
сетФирстНаме( догађај.таргет.вредност )
}
повратак (
<форму>
<тип уноса='текст' плацехолдер='Име' онИнпут={хандлеФирстНамеЦханге} />
</form>
)
}
Изнад имамо а име држава, ан онИнпут догађај, и а хандлеЦханге руковалац. Тхе хандлеЦханге функција се покреће при сваком притиску на тастер да ажурира име држава.
Овај приступ може бити идеалан када радите са једним пољем за унос, али креирате различита стања и функције руковаоца за сваки улазни елемент би се понављале када би се радило са вишеструким улазима поља.
Да бисте избегли писање понављајућег и сувишног кода у таквим ситуацијама, дајте сваком пољу за унос различито име, поставите објекат као вредност почетног стања вашег обрасца, а затим попуните објекат својствима са истим именима као и улаз поља.
На пример:
функцијаАпликација() {конст [формДата, сетФормДата] = Реацт.усеСтате(
{
име: '',
презиме: ''
}
);
повратак (
<форму>
<тип уноса='текст' плацехолдер='Име' наме='име' />
<тип уноса='текст' плацехолдер='Презиме' наме='презиме' />
</form>
)
}
Тхе формДата служиће као променљива стања за управљање и ажурирање свих поља за унос унутар обрасца. Уверите се да су имена својстава у објекту стања идентична именима улазних елемената.
Да бисте ажурирали стање са улазним подацима, додајте ан онИнпут слушалац догађаја на улазни елемент, а затим позовите креирану функцију руковаоца.
На пример:
функцијаАпликација() {конст [формДата, сетФормДата] = Реацт.усеСтате(
{
име: '',
презиме: ''
}
);
функцијахандлеЦханге(догађај) {
сетФормДата( (превСтате) => {
повратак {
...превСтате,
[евент.таргет.наме]: догађај.таргет.вредност
}
})
}
повратак (
<форму>
<улазни
типе='текст'
плацехолдер='Име'
наме='име'
онИнпут={хандлеЦханге}
/>
<улазни
типе='текст'
плацехолдер='Презиме'
наме='презиме'
онИнпут={хандлеЦханге}
/>
</form>
)
}
Блок кода изнад је користио ан онИнпут догађај и функција руковаоца, хандлеФирстНамеЦханге. Ово хандлеФирстНамеЦханге функција ће ажурирати својства стања када се позове. Вредности својстава стања биће исте као и вредности њихових одговарајућих улазних елемената.
Претварање ваших улаза у контролисане компоненте
Када се ХТМЛ образац пошаље, његово подразумевано понашање је навигација до нове странице у претраживачу. Ово понашање је незгодно у неким ситуацијама, на пример када то желите потврди податке унете у образац. У већини случајева, сматраћете да је прикладније имати ЈаваСцрипт функцију са приступом информацијама унетим у образац. Ово се лако може постићи у Реацт-у коришћењем контролисаних компоненти.
Са индек.хтмл датотекама, елементи обрасца задржавају своје стање и мењају га као одговор на унос корисника. Са Реацт-ом, функција постављеног стања мења динамичко стање ускладиштено у својству стања компоненте. Можете комбиновати два стања тако што ћете Реацт стање учинити јединственим извором истине. На овај начин, компонента која креира образац контролише шта се дешава када корисник унесе податке. Улазни елементи форме са вредностима које Реацт контролише називају се контролисане компоненте или контролисани улази.
Да бисте користили контролисане улазе у вашој Реацт апликацији, додајте вредност проп у свој улазни елемент:
функцијаАпликација() {конст [формДата, сетФормДата] = Реацт.усеСтате(
{
име: '',
презиме: ''
}
);
функцијахандлеЦханге(догађај) {
сетФормДата( (превСтате) => {
повратак {
...превСтате,
[евент.таргет.наме]: догађај.таргет.вредност
}
})
}
повратак (
<форму>
<улазни
типе='текст'
плацехолдер='Име'
наме='име'
онИнпут={хандлеЦханге}
валуе={формДата.фирстНаме}
/>
<улазни
типе='текст'
плацехолдер='Презиме'
наме='презиме'
онИнпут={хандлеЦханге}
валуе={формДата.ластНаме}
/>
</form>
)
}
Атрибути вредности улазних елемената су сада подешени да буду вредност одговарајућих својстава стања. Вредност улаза је увек одређена стањем када се користи контролисана компонента.
Руковање елементом за унос текста Тектареа
Тхе тектареа елемент је као сваки обичан улазни елемент, али садржи вишелинијске улазе. Корисно је када преносите информације које захтевају више од једног реда.
У датотеци индек.хтмл, тектареа таг елемент одређује своју вредност према својим потомцима, као што се види у блоку кода испод:
<тектареа>
Здраво, како си?
</textarea>
Са Реацт-ом, да бисте користили тектареа елемент, можете креирати улазни елемент са типом тектареа.
Овако:
функцијаАпликација() {повратак (
<форму>
<тип уноса='тектареа' наме='порука'/>
</form>
)
}
Алтернатива употреби тектареа као тип уноса је коришћење тектареа ознака елемента уместо ознаке типа уноса, као што се види у наставку:
функцијаАпликација() {повратак (
<форму>
<тектареа
наме='порука'
валуе='Здраво, како си?'
/>
</form>
)
}
Тхе тектареа таг има атрибут вредности који садржи информације корисника унете у тектареа елемент. Ово га чини да ради као подразумевани Реацт улазни елемент.
Рад са Реацтовим елементом за потврду поља за потврду
Ствари су мало другачије када се ради са поље за потврду инпутс. Поље за унос типа поље за потврду нема атрибут вредности. Међутим, има а проверено атрибут. Ово проверено атрибут се разликује од атрибута вредности по томе што захтева логичку вредност да би се утврдило да ли је поље означено или опозвано.
На пример:
функцијаАпликација() {повратак (
<форму>
<тип уноса='поље за потврду' ид='придруживање' наме='придружити' />
<ознака хтмлФор='придруживање'>Да ли бисте волели да се придружите нашем тиму?</label>
</form>
)
}
Елемент ознаке се односи на ИД улазног елемента користећи хтмлФор атрибут. Ово хтмлФор атрибут преузима ИД елемента уноса—у овом случају, придруживање. Када креирање ХТМЛ обрасца, тхе хтмлФор атрибут представља за атрибут.
Тхе поље за потврду боље је користити као контролисани улаз. Ово можете постићи тако што ћете креирати стање и доделити му почетну логичку вредност труе или фалсе.
Требало би да укључите два реквизита на поље за потврду улазни елемент: а проверено имовине и ан онЦханге догађај са функцијом руковаоца која ће одредити вредност стања користећи сетИсЦхецкед() функција.
На пример:
функцијаАпликација() {конст [исЦхецкед, сетИсЦхецкед] = Реацт.усеСтате(лажно);
функцијахандлеЦханге() {
сетИсЦхецкед( (превСтате) => !превСтате )
}
повратак (
<форму>
<улазни
типе='поље за потврду'
ид='придруживање'
наме='придружити'
цхецкед={исЦхецкед}
онЦханге={хандлеЦханге}
/>
<ознака хтмлФор='придруживање'>Да ли бисте волели да се придружите нашем тиму?</label>
</form>
)
}
Овај блок кода генерише ан исЦхецкед стање и поставља своју почетну вредност на лажно. Поставља вредност за исЦхецкед до проверено атрибут у улазном елементу. Тхе хандлеЦханге функција ће се покренути и променити вредност стања исЦхецкед на своју супротност кад год кликнете на поље за потврду.
Елемент обрасца вероватно може да садржи више елемената за унос различитих типова, као што су поља за потврду, текст итд.
У таквим случајевима, можете да рукујете њима на сличан начин као што сте руковали вишеструким улазним елементима истог типа.
Ево примера:
функцијаАпликација() {дозволити[формДата, сетФормДата] = Реацт.усеСтате(
{
име: ''
придружити: истина,
}
);
функцијахандлеЦханге(догађај) {
конст {име, вредност, тип, проверено} = евент.таргет;
сетФормДата( (превСтате) => {
повратак {
...превСтате,
[име]: тип поље за потврду? проверено: вредност
}
})
}
повратак (
<форму>
<улазни
типе='текст'
плацехолдер='Име'
наме='име'
онИнпут={хандлеЦханге}
валуе={формДата.фирстНаме}
/>
<улазни
типе='поље за потврду'
ид='придруживање'
наме='придружити'
цхецкед={формДата.јоин}
онЦханге={хандлеЦханге}
/>
<ознака хтмлФор='придруживање'>Да ли бисте волели да се придружите нашем тиму?</label>
</form>
)
}
Имајте на уму да у хандлеЦханге функција, сетФормДата користи тернарни оператор за додељивање вредности проверено својство на својства стања ако је циљни тип уноса а поље за потврду. Ако није, додељује вредности вредност атрибут.
Сада можете да рукујете Реацт обрасцима
Научили сте како да радите са формама у Реацт-у користећи различите елементе за унос форме овде. Такође сте научили како да примените контролисане уносе на елементе обрасца додавањем параметра вредности или провереног пропса када радите са пољима за потврду.
Ефикасно руковање елементима за унос Реацт обрасца ће побољшати перформансе ваше Реацт апликације, што ће резултирати бољим свестраним корисничким искуством.