Traitement des données de formulaire lors d'un clic sur un bouton dans React
Dans la leçon précédente, nous faisions en sorte qu'à chaque saisie d'un caractère dans l'input, le résultat apparaisse instantanément dans le paragraphe. Bien sûr, cela semble élégant, mais cela présente un inconvénient.
Imaginons que nous devions effectuer une opération "lourde", gourmande en ressources. Il n'est pas très optimal de la faire à chaque saisie de caractère - il vaut mieux attendre la fin de la saisie des données et ensuite exécuter l'opération nécessaire une fois et afficher le résultat dans le paragraphe.
Pour cela, nous devons ajouter un bouton, sur lequel un clic déclenchera notre opération gourmande en ressources. Dans ce cas, chaque input aura à nouveau son propre état, plus un état supplémentaire dont nous aurons besoin pour enregistrer le résultat de l'opération et l'afficher à l'écran.
Regardons un exemple. Supposons que nous ayons deux inputs et un bouton. Lors d'un clic sur le bouton, trouvons la somme des nombres saisis dans les inputs.
Implémentons :
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>;
}
On peut utiliser la version raccourcie :
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>;
}
Deux inputs, deux boutons et un paragraphe sont donnés. Supposons que des nombres soient saisis dans les inputs. Lors d'un clic sur le premier bouton, trouvez la somme des nombres, et lors d'un clic sur le deuxième bouton - le produit. Affichez le résultat dans le paragraphe.
Deux inputs, un bouton et un paragraphe sont donnés. Supposons que des dates soient saisies dans les inputs au format 2025-12-31. Lors d'un clic sur le bouton, trouvez la différence entre les dates en jours et affichez le résultat dans le paragraphe.
Modifiez la tâche précédente pour que par défaut, les inputs contiennent la date actuelle.
Un input et un paragraphe sont donnés. Un nombre est saisi dans l'input. Lors de la perte du focus, affichez dans le paragraphe la somme des chiffres du nombre saisi.
Un input et un paragraphe sont donnés. Un nombre est saisi dans l'input. Lors de la perte du focus, affichez dans le paragraphe le produit des diviseurs du nombre saisi.
