Home-theater-designers
Darbs ar formām un veidlapas elementiem, izstrādājot ar React, var būt sarežģīts, jo HTML veidlapas elementi programmā React darbojas nedaudz savādāk nekā citi DOM elementi.
Uzziniet, kā strādāt ar formām un veidlapu elementiem, piemēram, izvēles rūtiņām, teksta apgabaliem un vienas rindiņas teksta ievadi.
Ievades lauku pārvaldība veidlapās
Programmā React ievades lauka pārvaldīšana veidlapā bieži tiek veikta, izveidojot stāvokli un saistot to ar ievades lauku.
DIENAS VIDEO MAKEUSEOF
Piemēram:
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>
)
}
Iepriekš mums ir a vārds valsts, an onInput pasākums un a rokturisMainīt apdarinātājs. The rokturisMainīt funkcija darbojas katrā taustiņsitienā, lai atjauninātu vārds Valsts.
Šī pieeja var būt ideāla, strādājot ar vienu ievades lauku, taču dažādu stāvokļu un apstrādātāja funkciju izveide katram ievades elementam varētu atkārtot, strādājot ar vairākiem ievades laukiem.
Lai izvairītos no atkārtota un lieka koda rakstīšanas šādās situācijās, piešķiriet katram ievades laukam atšķirīgu nosaukumu, iestatiet objektu kā veidlapas sākotnējā stāvokļa vērtību un pēc tam aizpildiet objektu ar rekvizītiem ar tādiem pašiem nosaukumiem kā ievades laukiem.
kā izveidot jaunu SSD
Piemēram:
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>
)
}
The formData kalpos kā stāvokļa mainīgais, lai pārvaldītu un atjauninātu visus ievades laukus veidlapā. Pārliecinieties, vai stāvokļa objekta rekvizītu nosaukumi ir identiski ievades elementu nosaukumiem.
Lai atjauninātu stāvokli ar ievades datiem, pievienojiet onInput notikumu uztvērējs ievades elementam, pēc tam izsauciet izveidoto apdarinātāja funkciju.
Piemēram:
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>
)
}
Iepriekš minētais koda bloks izmantoja an onInput notikums un apstrādātāja funkcija, handFirstNameChange . Šis handFirstNameChange funkcija atjauninās stāvokļa rekvizītus, kad tas tiks izsaukts. Stāvokļa rekvizītu vērtības būs tādas pašas kā to atbilstošo ievades elementu vērtības.
Ievadītās informācijas pārvēršana kontrolētos komponentos
Kad tiek iesniegta HTML veidlapa, tās noklusējuma darbība ir pārlūkprogrammas pāriešana uz jaunu lapu. Šāda rīcība dažās situācijās ir neērta, piemēram, kad vēlaties apstiprināt veidlapā ievadītos datus . Vairumā gadījumu jums būs piemērotāka JavaScript funkcija ar piekļuvi veidlapā ievadītajai informācijai. To var viegli panākt React, izmantojot kontrolētus komponentus.
Index.html failos veidlapas elementi saglabā savu stāvokli un modificē to, reaģējot uz lietotāja ievadi. Izmantojot React, iestatītā stāvokļa funkcija maina komponenta stāvokļa īpašumā saglabāto dinamisko stāvokli. Varat apvienot abus stāvokļus, padarot React stāvokli par vienu patiesības avotu. Tādā veidā komponents, kas izveido veidlapu, kontrolē to, kas notiek, kad lietotājs ievada datus. Ievades formas elementi ar vērtībām, kas React vadīklas tiek saukti par kontrolētiem komponentiem vai kontrolētiem ievadiem.
Lai savā React lietojumprogrammā izmantotu kontrolētās ievades, ievades elementam pievienojiet vērtības norādi:
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>
)
}
Ievades elementu vērtību atribūti tagad ir iestatīti kā atbilstošo stāvokļa rekvizītu vērtība. Izmantojot kontrolēto komponentu, ievades vērtību vienmēr nosaka stāvoklis.
Textarea ievades elementa apstrāde
The teksta apgabals elements ir kā jebkurš parastais ievades elements, bet tajā ir vairāku rindu ievades. Tas ir noderīgi, nododot informāciju, kas prasa vairāk nekā vienu rindiņu.
Failā index.html teksta apgabala tags elements nosaka tā vērtību pēc saviem bērniem, kā redzams tālāk esošajā koda blokā:
<textarea>
Hello, How are you?
</textarea>
Izmantojot React, lai izmantotu teksta apgabals elementu, varat izveidot ievades elementu ar veidu teksta apgabals .
Tā kā:
function App() {
return (
<form>
<input type='textarea' name='message'/>
</form>
)
}
Alternatīva lietošanai teksta apgabals kā ievades veids ir izmantot teksta apgabals elementa tags ievades tipa taga vietā, kā redzams tālāk:
kā palaist diagnostikas logus 10
function App() {
return (
<form>
<textarea
name='message'
value='Hello, How are you?'
/>
</form>
)
}
The teksta apgabals tagam ir vērtības atribūts, kas satur lietotāja informāciju, kas ievadīta teksta apgabals elements. Tādējādi tas darbojas kā noklusējuma React ievades elements.
Darbs ar React izvēles rūtiņas ievades elementu
Strādājot, lietas ir nedaudz atšķirīgas izvēles rūtiņa ievades. Tipa ievades lauks izvēles rūtiņa nav vērtības atribūta. Tomēr tai ir a pārbaudīts atribūts. Šis pārbaudīts atribūts atšķiras no vērtības atribūta, pieprasot Būla vērtību, lai noteiktu, vai izvēles rūtiņa ir atzīmēta vai nav atzīmēta.
Piemēram:
function App() {
return (
<form>
<input type='checkbox' id='joining' name='join' />
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
Etiķetes elements attiecas uz ievades elementa ID, izmantojot htmlPar atribūts. Šis htmlPar atribūts uzņem ievades elementa ID — šajā gadījumā pievienojas. Kad HTML veidlapas izveide , htmlPar atribūts apzīmē priekš atribūts.
The izvēles rūtiņa ir labāk izmantot kā kontrolētu ievadi. To var panākt, izveidojot stāvokli un piešķirot tam sākotnējo Būla vērtību patiess vai nepatiess.
Jums jāiekļauj divi rekvizīti izvēles rūtiņa ievades elements: a pārbaudīts īpašums un an onChange notikums ar apdarinātāja funkciju, kas noteiks stāvokļa vērtību, izmantojot setIsChecked() funkciju.
Piemēram:
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>
)
}
Šis koda bloks ģenerē irPārbaudīts stāvokli un iestata tā sākotnējo vērtību uz viltus . Tas nosaka vērtību irPārbaudīts uz pārbaudīts atribūts ievades elementā. The rokturisMainīt funkcija aktivizēsies un mainīs stāvokļa vērtību irPārbaudīts ikreiz, kad noklikšķināt uz izvēles rūtiņas.
Veidlapas elementā, iespējams, var būt vairāki dažāda veida ievades elementi, piemēram, izvēles rūtiņas, teksts utt.
kā atgriezt pazaudētu tālruni
Šādos gadījumos varat tos apstrādāt līdzīgi tam, kā apstrādājāt vairākus viena veida ievades elementus.
Šeit ir piemērs:
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>
)
}
Ņemiet vērā, ka sadaļā rokturisMainīt funkcija, setFormData izmanto trīskāršu operatoru, lai piešķirtu vērtību pārbaudīts rekvizītu stāvokļa rekvizītiem, ja mērķa ievades veids ir a izvēles rūtiņa . Ja nē, tas piešķir vērtības vērtību atribūts.
Tagad varat apstrādāt reakcijas veidlapas
Šeit jūs uzzinājāt, kā strādāt ar formām programmā React, izmantojot dažādus veidlapas ievades elementus. Jūs arī uzzinājāt, kā veidlapas elementiem lietot kontrolētas ievades, pievienojot vērtības vai atzīmes, strādājot ar izvēles rūtiņām.
Efektīva React veidlapas ievades elementu apstrāde uzlabos jūsu React lietojumprogrammas veiktspēju, tādējādi nodrošinot labāku visaptverošu lietotāja pieredzi.