Forme di reazione
Proprio come in HTML, React utilizza i moduli per consentire agli utenti di interagire con la pagina web.
Aggiunta di moduli in React
Aggiungi un modulo con React come qualsiasi altro elemento:
Esempio:
Aggiungi un modulo che consenta agli utenti di inserire il proprio nome:
function MyForm() {
return (
<form>
<label>Enter your name:
<input type="text" />
</label>
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Funzionerà normalmente, il modulo verrà inviato e la pagina si aggiornerà.
Ma in genere non è ciò che vogliamo che accada in React.
Vogliamo prevenire questo comportamento predefinito e lasciare che React controlli il modulo.
Gestione dei moduli
La gestione dei moduli riguarda il modo in cui gestisci i dati quando cambiano valore o vengono inviati.
In HTML, i dati dei moduli sono generalmente gestiti dal DOM.
In React, i dati dei moduli sono generalmente gestiti dai componenti.
Quando i dati vengono gestiti dai componenti, tutti i dati vengono archiviati nello stato del componente.
Puoi controllare le modifiche aggiungendo gestori di eventi
onChangenell'attributo.
Possiamo usare useStateHook per tenere traccia di ogni valore di input e fornire una "fonte di verità unica" per l'intera applicazione.
Vedi la sezione React Hooks per maggiori informazioni sugli Hooks.
Esempio:
Utilizzare l' onChangeHook per gestire l'input:
import { useState } from "react";
import ReactDOM from 'react-dom';
function MyForm() {
const [name, setName] = useState("");
return (
<form>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Ottieni la certificazione!
ISCRIVITI A $95
Invio di moduli
Puoi controllare l'azione di invio aggiungendo un gestore di eventi onSubmitnell'attributo per <form>:
Esempio:
Aggiungi un pulsante di invio e un gestore di eventi onSubmitnell'attributo:
import { useState } from "react";
import ReactDOM from 'react-dom';
function MyForm() {
const [name, setName] = useState("");
const handleSubmit = (event) => {
event.preventDefault();
alert(`The name you entered was: ${name}`)
}
return (
<form onSubmit={handleSubmit}>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<input type="submit" />
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Campi di input multipli
Puoi controllare i valori di più di un campo di input aggiungendo un
nameattributo a ciascun elemento.
Inizializzeremo il nostro stato con un oggetto vuoto.
Per accedere ai campi nel gestore eventi utilizzare la
sintassi event.target.namee
.event.target.value
Per aggiornare lo stato, utilizzare parentesi quadre [notazione parentesi quadre] attorno al nome della proprietà.
Esempio:
Scrivi un modulo con due campi di input:
import { useState } from "react";
import ReactDOM from "react-dom";
function MyForm() {
const [inputs, setInputs] = useState({});
const handleChange = (event) => {
const name = event.target.name;
const value = event.target.value;
setInputs(values => ({...values, [name]: value}))
}
const handleSubmit = (event) => {
event.preventDefault();
alert(inputs);
}
return (
<form onSubmit={handleSubmit}>
<label>Enter your name:
<input
type="text"
name="username"
value={inputs.username || ""}
onChange={handleChange}
/>
</label>
<label>Enter your age:
<input
type="number"
name="age"
value={inputs.age || ""}
onChange={handleChange}
/>
</label>
<input type="submit" />
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Nota: utilizziamo la stessa funzione di gestione degli eventi per entrambi i campi di input, potremmo scrivere un gestore di eventi per ciascuno, ma questo ci dà un codice molto più pulito ed è il modo preferito in React.
Area di testo
L'elemento textarea in React è leggermente diverso dal normale HTML.
In HTML il valore di una textarea era il testo tra il tag di inizio
<textarea>
e il tag di fine </textarea>.
<textarea>
Content of the textarea.
</textarea>In React il valore di una textarea è posto in un attributo value. Useremo useStateHook per gestire il valore della textarea:
Esempio:
Una semplice area di testo con alcuni contenuti:
import { useState } from "react";
import ReactDOM from "react-dom";
function MyForm() {
const [textarea, setTextarea] = useState(
"The content of a textarea goes in the value attribute"
);
const handleChange = (event) => {
setTextarea(event.target.value)
}
return (
<form>
<textarea value={textarea} onChange={handleChange} />
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Selezionare
Anche un elenco a discesa, o una casella di selezione, in React è leggermente diverso dall'HTML.
in HTML, il valore selezionato nell'elenco a discesa è stato definito con l' selectedattributo:
HTML:
<select>
<option value="Ford">Ford</option>
<option value="Volvo" selected>Volvo</option>
<option value="Fiat">Fiat</option>
</select>In React, il valore selezionato è definito con un value
attributo sul selecttag:
Esempio:
Una semplice casella di selezione, in cui il valore selezionato "Volvo" viene inizializzato nel costruttore:
function MyForm() {
const [myCar, setMyCar] = useState("Volvo");
const handleChange = (event) => {
setMyCar(event.target.value)
}
return (
<form>
<select value={myCar} onChange={handleChange}>
<option value="Ford">Ford</option>
<option value="Volvo">Volvo</option>
<option value="Fiat">Fiat</option>
</select>
</form>
)
}
Apportando queste lievi modifiche a <textarea>e <select>, React è in grado di gestire tutti gli elementi di input allo stesso modo.