Lavorare con i moduli e gli elementi del modulo durante lo sviluppo con React può essere complesso perché gli elementi del modulo HTML si comportano in modo leggermente diverso in React rispetto ad altri elementi DOM.
Scopri come lavorare con i moduli e gli elementi dei moduli come caselle di controllo, aree di testo e input di testo a riga singola.
Gestione dei campi di input nei moduli
In React, la gestione di un campo di input in un modulo viene spesso eseguita creando uno stato e associandolo al campo di input.
Ad esempio:
funzioneApp() {const [firstName, setFirstName] = React.useState('');
funzionehandleFirstNameChange(evento) {
setNome( evento.bersaglio.valore )
}
ritorno (
<modulo>
<tipo di input='testo' segnaposto='Nome di battesimo' onInput={handleFirstNameChange} />
</form>
)
}
Sopra abbiamo a nome di battesimo stato, an
onInput evento, e a handleChange gestore. IL handleChange la funzione viene eseguita a ogni battitura per aggiornare il file nome di battesimo stato.Questo approccio può essere ideale quando si lavora con un campo di input, ma si creano diversi stati e le funzioni del gestore per ogni elemento di input diventerebbero ripetitive quando si lavora con più input campi.
Per evitare di scrivere codice ripetitivo e ridondante in tali situazioni, assegna a ciascun campo di input un nome distinto, imposta un oggetto come valore di stato iniziale del modulo, quindi riempire l'oggetto con proprietà con gli stessi nomi dell'input campi.
Per esempio:
funzioneApp() {cost [formData, setFormData] = React.useState(
{
nome di battesimo: '',
cognome: ''
}
);
ritorno (
<modulo>
<tipo di input='testo' segnaposto='Nome di battesimo' nome='nome di battesimo' />
<tipo di input='testo' segnaposto='Cognome' nome='cognome' />
</form>
)
}
IL formData fungerà da variabile di stato per gestire e aggiornare tutti i campi di input all'interno del modulo. Assicurarsi che i nomi delle proprietà nell'oggetto stato siano identici ai nomi degli elementi di input.
Per aggiornare lo stato con i dati di input, aggiungi un onInput listener di eventi all'elemento di input, quindi chiama la funzione di gestione creata.
Per esempio:
funzioneApp() {cost [formData, setFormData] = React.useState(
{
nome di battesimo: '',
cognome: ''
}
);
funzionehandleChange(evento) {
setFormData( (prevState) => {
ritorno {
...prevStato,
[evento.target.name]: evento.bersaglio.valore
}
})
}
ritorno (
<modulo>
<ingresso
tipo='testo'
segnaposto='Nome di battesimo'
nome='nome di battesimo'
onInput={handleChange}
/>
<ingresso
tipo='testo'
segnaposto='Cognome'
nome='cognome'
onInput={handleChange}
/>
</form>
)
}
Il blocco di codice sopra utilizzato un onInput evento e una funzione gestore, handleFirstNameChange. Questo handleFirstNameChange la funzione aggiornerà le proprietà dello stato quando viene chiamata. I valori delle proprietà di stato saranno gli stessi di quelli dei corrispondenti elementi di input.
Conversione dei tuoi input in componenti controllati
Quando un modulo HTML viene inviato, il suo comportamento predefinito è quello di passare a una nuova pagina nel browser. Questo comportamento è scomodo in alcune situazioni, come quando vuoi convalidare i dati inseriti in un modulo. Nella maggior parte dei casi, troverai più adatto avere una funzione JavaScript con accesso alle informazioni inserite nel modulo. Ciò può essere facilmente ottenuto in React utilizzando componenti controllati.
Con i file index.html, gli elementi del modulo tengono traccia del loro stato e lo modificano in risposta all'input di un utente. Con React, la funzione set state modifica uno stato dinamico memorizzato nella proprietà state del componente. Puoi combinare i due stati rendendo lo stato React l'unica fonte di verità. In questo modo, il componente che crea un form controlla cosa succede quando un utente inserisce i dati. Gli elementi del modulo di input con valori controllati da React sono chiamati componenti controllati o input controllati.
Per utilizzare gli input controllati nella tua applicazione React, aggiungi un valore prop al tuo elemento di input:
funzioneApp() {cost [formData, setFormData] = React.useState(
{
nome di battesimo: '',
cognome: ''
}
);
funzionehandleChange(evento) {
setFormData( (prevState) => {
ritorno {
...prevStato,
[evento.target.name]: evento.bersaglio.valore
}
})
}
ritorno (
<modulo>
<ingresso
tipo='testo'
segnaposto='Nome di battesimo'
nome='nome di battesimo'
onInput={handleChange}
valore={formData.firstName}
/>
<ingresso
tipo='testo'
segnaposto='Cognome'
nome='cognome'
onInput={handleChange}
valore={formData.lastName}
/>
</form>
)
}
Gli attributi di valore degli elementi di input sono ora impostati per essere il valore delle proprietà di stato corrispondenti. Il valore dell'ingresso è sempre determinato dallo stato quando si utilizza un componente controllato.
Gestione dell'elemento di input Textarea
IL area di testo element è come qualsiasi normale elemento di input ma contiene input su più righe. È utile quando si passano informazioni che richiedono più di una singola riga.
In un file index.html, il tag area di testo elemento determina il suo valore dai suoi figli, come si vede nel blocco di codice qui sotto:
<area di testo>
Ciao, come stai?
</textarea>
Con React, per usare il area di testo elemento, è possibile creare un elemento di input con il tipo area di testo.
Così:
funzioneApp() {ritorno (
<modulo>
<tipo di input='area di testo' nome='Messaggio'/>
</form>
)
}
Un'alternativa all'uso area di testo come tipo di input è usare il area di testo tag element al posto del tag input type, come mostrato di seguito:
funzioneApp() {ritorno (
<modulo>
<area di testo
nome='Messaggio'
valore='Ciao, come stai?'
/>
</form>
)
}
IL area di testo tag ha un attributo value che contiene le informazioni dell'utente inserite nel file area di testo elemento. Questo lo fa funzionare come un elemento di input React predefinito.
Lavorare con l'elemento di input Checkbox di React
Le cose sono leggermente diverse quando si lavora con casella di controllo ingressi. Il campo di input del tipo casella di controllo non ha un attributo value. Tuttavia, ha un controllato attributo. Questo controllato attribute differisce da un attributo value poiché richiede un valore booleano per determinare se la casella è selezionata o deselezionata.
Per esempio:
funzioneApp() {ritorno (
<modulo>
<tipo di input='casella di controllo' id='unendo' nome='giuntura' />
<etichetta htmlFor='unendo'>Ti piacerebbe unirti al nostro team?</label>
</form>
)
}
L'elemento label si riferisce all'ID dell'elemento di input utilizzando il htmlFor attributo. Questo htmlFor attribute accetta l'ID dell'elemento di input, in questo caso, unendo. Quando creazione di un modulo HTML, IL htmlFor attributo rappresenta il per attributo.
IL casella di controllo è meglio usato come input controllato. Puoi ottenere ciò creando uno stato e assegnandogli il valore booleano iniziale di vero o falso.
Dovresti includere due oggetti di scena nel file casella di controllo elemento di input: a controllato proprietà e un onChange evento con una funzione di gestione che determinerà il valore dello stato utilizzando il setIsChecked() funzione.
Per esempio:
funzioneApp() {cost [isChecked, setIsChecked] = React.useState(falso);
funzionehandleChange() {
setIsChecked( (prevState) => !prevState )
}
ritorno (
<modulo>
<ingresso
tipo='casella di controllo'
id='unendo'
nome='giuntura'
controllato={ècontrollato}
onChange={handleChange}
/>
<etichetta htmlFor='unendo'>Ti piacerebbe unirti al nostro team?</label>
</form>
)
}
Questo blocco di codice genera un file isChecked state e ne imposta il valore iniziale a falso. Imposta il valore di isChecked al controllato attributo nell'elemento di input. IL handleChange funzione si attiverà e cambierà il valore dello stato di isChecked al suo contrario ogni volta che si fa clic sulla casella di controllo.
Un elemento del modulo può probabilmente contenere più elementi di input di tipi diversi, come caselle di controllo, testo, ecc.
In questi casi, puoi gestirli in modo simile a come hai gestito più elementi di input dello stesso tipo.
Ecco un esempio:
funzioneApp() {permettere[formData, setFormData] = React.useState(
{
nome di battesimo: ''
giuntura: VERO,
}
);
funzionehandleChange(evento) {
cost {nome, valore, tipo, selezionato} = event.target;
setFormData( (prevState) => {
ritorno {
...prevStato,
[nome]: tipo casella di controllo? controllato: valore
}
})
}
ritorno (
<modulo>
<ingresso
tipo='testo'
segnaposto='Nome di battesimo'
nome='nome di battesimo'
onInput={handleChange}
valore={formData.firstName}
/>
<ingresso
tipo='casella di controllo'
id='unendo'
nome='giuntura'
verificato={formData.join}
onChange={handleChange}
/>
<etichetta htmlFor='unendo'>Ti piacerebbe unirti al nostro team?</label>
</form>
)
}
Si noti che nel handleChange funzione, setFormData usa un operatore ternario per assegnare il valore di the controllato property alle proprietà state se il tipo di input di destinazione è a casella di controllo. In caso contrario, assegna i valori di valore attributo.
Ora puoi gestire i moduli React
Hai imparato a lavorare con i moduli in React utilizzando diversi elementi di input del modulo qui. Hai anche imparato come applicare input controllati agli elementi del tuo modulo aggiungendo un prop di valore o un prop controllato quando lavori con le caselle di controllo.
La gestione efficiente degli elementi di input del modulo React migliorerà le prestazioni della tua applicazione React, con conseguente migliore esperienza utente a tutto tondo.
