Home-theater-designers
Att arbeta med formulär och formulärelement när man utvecklar med React kan vara komplext eftersom HTML-formulärelement beter sig något annorlunda i React än andra DOM-element.
Lär dig hur du arbetar med formulär och formulärelement som kryssrutor, textområden och enrads textinmatning.
Hantera inmatningsfält i formulär
I React utförs ofta hantering av ett inmatningsfält i en form genom att skapa ett tillstånd och binda det till inmatningsfältet.
MAKEUSE AV DAGENS VIDEO
Till exempel:
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>
)
}
Ovan har vi en förnamn stat, en onInput händelse och en handtag Ändra hanterare. De handtag Ändra funktionen körs vid varje knapptryckning för att uppdatera förnamn stat.
Detta tillvägagångssätt kan vara idealiskt när man arbetar med ett inmatningsfält, men att skapa olika tillstånd och hanterarfunktioner för varje inmatningselement skulle bli repetitivt när man arbetar med flera inmatningsfält.
För att undvika att skriva repetitiv och redundant kod i sådana situationer, ge varje inmatningsfält ett distinkt namn, ställ in ett objekt som initialtillståndsvärde för ditt formulär och fyll sedan objektet med egenskaper med samma namn som inmatningsfälten.
Till exempel:
hur man konverterar kindle book till pdf
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>
)
}
De formData kommer att fungera som tillståndsvariabel för att hantera och uppdatera alla inmatningsfält i formuläret. Se till att namnen på egenskaperna i tillståndsobjektet är identiska med indataelementens namn.
För att uppdatera tillståndet med indata, lägg till en onInput händelseavlyssnare till inmatningselementet, anrop sedan din skapade hanterarfunktion.
Till exempel:
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>
)
}
Kodblocket ovan använde en onInput händelse och en hanterarfunktion, handleFirstNameChange . Detta handleFirstNameChange funktionen kommer att uppdatera tillståndsegenskaperna när den anropas. Värdena för tillståndsegenskaperna kommer att vara desamma som för deras motsvarande indataelement.
Konvertera dina ingångar till kontrollerade komponenter
När ett HTML-formulär skickas är dess standardbeteende att navigera till en ny sida i webbläsaren. Detta beteende är obekvämt i vissa situationer, som när du vill validera uppgifterna i ett formulär . I de flesta fall kommer du att tycka att det är mer lämpligt att ha en JavaScript-funktion med tillgång till den information som skrivs in i formuläret. Detta kan enkelt uppnås i React med hjälp av kontrollerade komponenter.
Med index.html-filer behåller formulärelement sitt tillstånd och ändrar det som svar på en användares input. Med React modifierar set state-funktionen ett dynamiskt tillstånd lagrat i komponentens tillståndsegenskap. Du kan kombinera de två tillstånden genom att göra React-tillståndet till den enda källan till sanning. På så sätt styr komponenten som skapar ett formulär vad som händer när en användare anger data. Inmatningsformulärelement med värden som React kontrollerar kallas kontrollerade komponenter eller kontrollerade ingångar.
För att använda kontrollerade ingångar i din React-applikation, lägg till en värdeprop till ditt inmatningselement:
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>
)
}
Värdeattributen för inmatningselementen är nu inställda på värdet för motsvarande tillståndsegenskaper. Värdet på ingången bestäms alltid av tillståndet vid användning av en kontrollerad komponent.
Hantera Textarea Input Element
De textområde element är som vilket vanligt ingångselement som helst men innehåller flerradsingångar. Det är användbart när du skickar information som kräver mer än en enda rad.
I en index.html-fil visas textarea-tagg element bestämmer dess värde av sina barn, som visas i kodblocket nedan:
<textarea>
Hello, How are you?
</textarea>
Med React, för att använda textområde element kan du skapa ett inmatningselement med typen textområde .
Såhär:
function App() {
return (
<form>
<input type='textarea' name='message'/>
</form>
)
}
Ett alternativ till att använda textområde som en ingångstyp är att använda textområde elementtagg i stället för inputtyptaggen, som visas nedan:
function App() {
return (
<form>
<textarea
name='message'
value='Hello, How are you?'
/>
</form>
)
}
De textområde taggen har ett värdeattribut som innehåller användarens information som skrivs in i textområde element. Detta gör att det fungerar som ett standardinmatningselement för React.
Arbeta med Reacts kryssruta-ingångselement
Saker och ting är lite annorlunda när man jobbar med kryssruta ingångar. Inmatningsfältet för typen kryssruta har inget värdeattribut. Den har dock en kontrollerade attribut. Detta kontrollerade attribut skiljer sig från ett värdeattribut genom att kräva ett booleskt värde för att avgöra om rutan är markerad eller avmarkerad.
Till exempel:
behöver du en router och ett modem
function App() {
return (
<form>
<input type='checkbox' id='joining' name='join' />
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
Etikettelementet hänvisar till ID för inmatningselementet med hjälp av htmlFör attribut. Detta htmlFör attribut tar in ID:t för inmatningselementet – i det här fallet, sammanfogning. När skapa ett HTML-formulär , den htmlFör attribut representerar för attribut.
De kryssruta används bättre som en kontrollerad ingång. Du kan uppnå detta genom att skapa ett tillstånd och tilldela det det initiala booleska värdet sant eller falskt.
Du bör inkludera två rekvisita på kryssruta inmatningselement: a kontrollerade egendom och en på Ändra händelse med en hanterarfunktion som bestämmer tillståndets värde med hjälp av setIsChecked() fungera.
Till exempel:
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>
)
}
Detta kodblock genererar en är kontrollerad tillstånd och ställer in dess initiala värde till falsk . Den sätter värdet på är kontrollerad till kontrollerade attribut i inmatningselementet. De handtag Ändra funktionen aktiveras och ändrar tillståndsvärdet för är kontrollerad till dess motsats när du klickar på kryssrutan.
Ett formulärelement kan sannolikt innehålla flera inmatningselement av olika typer, såsom kryssrutor, text, etc.
I sådana fall kan du hantera dem på ett liknande sätt som du hanterade flera inmatningselement av samma typ.
Här är ett exempel:
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>
)
}
Observera att i handtag Ändra fungera, setFormData använder en ternär operator för att tilldela värdet på kontrollerade egenskap till tillståndsegenskaperna om målinmatningstypen är en kryssruta . Om inte, tilldelar den värdena för värde attribut.
Nu kan du hantera reaktionsformulär
Du lärde dig hur du arbetar med formulär i React med hjälp av olika formulärinmatningselement här. Du lärde dig också hur du tillämpar kontrollerade inmatningar på dina formulärelement genom att lägga till en värdeprop eller markerad prop när du arbetar med kryssrutor.
Effektiv hantering av React-formulärinmatningselement kommer att förbättra prestandan för din React-applikation, vilket resulterar i en bättre all-around användarupplevelse.