Elaborazione dei dati del modulo al click del pulsante in React
Nella lezione precedente, facevamo in modo che all'inserimento di un carattere nell'input, nel paragrafo apparisse istantaneamente il risultato. Questo, ovviamente, sembra bello, ma ha uno svantaggio.
Immaginiamo di dover fare un'operazione "pesante", che richiede molte risorse. Non è molto ottimale farla ad ogni inserimento di carattere - è meglio aspettare l'inserimento finale dei dati e poi eseguire l'operazione necessaria una volta e visualizzare il risultato nel paragrafo.
Per fare questo, dobbiamo introdurre un pulsante, al click del quale verrà eseguita la nostra operazione che richiede risorse. In questo caso, ogni input avrà ancora il suo stato, più un altro stato ci serve per registrare il risultato dell'operazione e visualizzarlo sullo schermo.
Vediamo un esempio. Supponiamo di avere due input e un pulsante. Al click del pulsante, troviamo la somma dei numeri inseriti negli input.
Implementiamo:
function App() {
const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
const [result, setResult] = useState(0);
function handleChange1(event) {
setValue1(event.target.value);
}
function handleChange2(event) {
setValue2(event.target.value);
}
function handleClick() {
setResult(Number(value1) + Number(value2));
}
return <div>
<input value={value1} onChange={handleChange1} />
<input value={value2} onChange={handleChange2} />
<button onClick={handleClick}>btn</button>
<p>result: {result}</p>
</div>;
}
Si può usare una variante abbreviata:
function App() {
const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
const [result, setResult] = useState(0);
return <div>
<input value={value1} onChange={event => setValue1(event.target.value)} />
<input value={value2} onChange={event => setValue2(event.target.value)} />
<button onClick={() => setResult(Number(value1) + Number(value2))}>btn</button>
<p>result: {result}</p>
</div>;
}
Ci sono due input, due pulsanti e un paragrafo. Nei input vengono inseriti numeri. Al click del primo pulsante trova la somma dei numeri, e al click del secondo pulsante - il prodotto. Il risultato va visualizzato nel paragrafo.
Ci sono due input, un pulsante e un paragrafo. Nei input vengono inserite date nel formato 2025-12-31. Al click del pulsante trova la differenza tra le date in giorni e il risultato visualizzalo nel paragrafo.
Modifica il problema precedente in modo che per default negli input ci sia la data corrente.
C'è un input e un paragrafo. Nell'input viene inserito un numero. Alla perdita del focus, visualizza nel paragrafo la somma delle cifre del numero inserito.
C'è un input e un paragrafo. Nell'input viene inserito un numero. Alla perdita del focus, visualizza nel paragrafo il prodotto dei divisori del numero inserito.
