Cómo limpiar dos estados con un solo clic

Los eventos en React son la forma en que tu aplicación reacciona a la interacción del usuario, y en esta guía verás cómo funcionan onSubmit, onChange y onClick dentro de un search bar real. Si estás construyendo formularios y campos de búsqueda, entender cuándo usar cada evento te ahorra errores y mejora la experiencia de quien usa tu app.

Partimos de un archivo que ya venías trabajando: el del search bar. Ahí ya conviven dos eventos y vamos a sumarle un tercero para completar la funcionalidad de limpieza del filtro.

¿Qué hacen onSubmit y onChange en un formulario?

En el archivo del search bar ya teníamos dos eventos funcionando desde el arranque [00:32].

El primero es el onSubmit, que vive en la etiqueta form y dispara la acción handleSubmit definida arriba en el componente. Pero hay una condición clave: solo funciona si el botón está dentro de un form y tiene el tipo submit de manera explícita. Al hacer clic en ese botón, se dispara el evento [00:47].

El segundo es el onChange, y como su nombre indica, reacciona al cambio de valor del elemento donde está [01:04]. En este caso vive en un input cuyo valor es el de la ciudad. Cada vez que tecleas un carácter, se dispara el evento y ejecuta la función que setea la ciudad, manejando ese estado [01:15].

¿Qué diferencia hay entre onSubmit y onChange? onSubmit se ejecuta cuando envías un formulario completo con un botón tipo submit. onChange se ejecuta cada vez que cambia el valor de un campo, letra por letra.

Con estos dos ya podíamos enviar el formulario y actualizar el valor de la ciudad mientras escribes.

¿Cómo limpiar dos estados con el evento onClick?

Aqui viene el problema real. Si escribes Bogotá, el estado de city se actualiza, y al dar buscar se actualiza tambien searchCity [01:44]. Ya tienes dos estados. Pero al vaciar el input solo se limpia city, mientras searchCity sigue como Bogotá y tendrias que volver a hacer submit [02:07]. En experiencia de usuario eso no es recomendable.

Para resolverlo agregamos un elemento nuevo a la interfaz, justo debajo del input [02:22]. Los pasos fueron estos:

• Envolver o wrapear el input existente con un span.
• Agregar debajo un nuevo elemento con una validacion que muestra un boton.
• Asignar a ese boton un tercer evento, el onClick, que dispara la funcion de limpieza [02:47].

Si la funcion aun no esta declarada, el render se rompe, asi que buscamos la funcion definida y la colocamos en su lugar [03:00]. Al guardar aparece la nueva interfaz, pero el boton no se ve de inmediato porque tiene una validacion: solo aparece si existe city o searchCity [03:15].

Cuando escribes algo, el boton se muestra automaticamente. Es una X para limpiar el estado. Al hacer clic, esa funcion dispara setCity y setSearchCity a la vez, dejando ambos en el valor vacio, que es el mismo valor inicial que teniamos [03:44]. Asi cambian tanto la ciudad como la ciudad buscada de una sola pasada.

¿Cómo limpio varios estados en React con un solo clic? Dentro de la funcion que dispara el onClick, llamas a cada funcion setter que necesites, por ejemplo setCity('') y setSearchCity(''), y todos vuelven a su valor inicial.

¿Por qué onClick y onSubmit no son lo mismo?

Aunque ambos parecen un clic, tienen una diferencia importante que conviene tener clara [04:15].

• onClick se puede usar dentro de cualquier elemento. No necesita estar en un form ni tiene que ser un boton.
• onSubmit, aunque tambien implica un clic, obliga a estar dentro de un form y a que el boton sea de tipo submit.

Esa es la linea que los separa. Uno es flexible y va donde quieras; el otro esta atado a la estructura del formulario.

El cambio de agregar la funcion para limpiar estados no solo toca el estado interno, tambien mejora la experiencia del usuario [04:44]. De paso se agregaron estilos a la card: el precio quedo con el mismo color verde de los botones para que llame mas la atencion, y se ajusto el tamano de letra [04:58]. Tu puedes hacer lo mismo siempre que pienses en mejorar la experiencia de quien consume tus aplicaciones.

Ahora el input ya no solo actualiza el estado de busqueda, tambien limpia ese filtro. Pero las propiedades todavia no se filtran ni se reordenan [05:20]. En la siguiente clase usaremos ese valor actualizado para reflejar los cambios en la interfaz y completar la busqueda. ¿Ya identificaste en cual de tus proyectos podrias aplicar esta logica de limpieza de estados? Cuentanos en los comentarios.