Procesamiento de datos de formulario al hacer clic en un botón en React
En la lección anterior, hacíamos que al introducir un carácter en el input, el resultado apareciera instantáneamente en el párrafo. Esto, por supuesto, se ve bien, pero tiene una desventaja.
Imaginemos que necesitamos realizar una operación "pesada", que consume muchos recursos. No es muy óptimo hacerla con cada entrada de carácter - es mejor esperar a que se terminen de introducir los datos y luego ejecutar la operación necesaria una vez y mostrar el resultado en el párrafo.
Para ello, necesitamos un botón, al hacer clic en el cual se realizará nuestra operación que consume muchos recursos. En este caso, nuevamente cada input tendrá su propio estado, más otro estado que necesitamos para registrar el resultado de la operación y mostrarlo en la pantalla.
Veamos un ejemplo. Supongamos que tenemos dos inputs y un botón. Al hacer clic en el botón, encontremos la suma de los números introducidos en los inputs.
Implementemos:
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>;
}
Se puede usar una variante abreviada:
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>;
}
Se dan dos inputs, dos botones y un párrafo. Supongamos que se introducen números en los inputs. Al hacer clic en el primer botón, encuentre la suma de los números, y al hacer clic en el segundo botón, el producto. Muestre el resultado en el párrafo.
Se dan dos inputs, un botón y un párrafo. Supongamos que en los inputs se introducen fechas en formato 2025-12-31. Al hacer clic en el botón, encuentre la diferencia entre las fechas en días y muestre el resultado en el párrafo.
Modifique la tarea anterior para que por defecto en los inputs aparezca la fecha actual.
Se da un input y un párrafo. En el input se introduce un número. Al perder el foco, muestre en el párrafo la suma de los dígitos del número introducido.
Se da un input y un párrafo. En el input se introduce un número. Al perder el foco, muestre en el párrafo el producto de los divisores del número introducido.
