Desafío de Programación: Pregunta 15

Desafío de Programación Pregunta 15 Reescrito y traducido al español: el objetivo es implementar un componente PhoneNumberInput que acepte solo dígitos numéricos y formatee automáticamente el número en el formato (123)456-7890 añadiendo paréntesis cuando se ingresa el cuarto dígito y un guion antes del séptimo dígito.

Idea general y pasos para la implementación: declarar el valor del input en un estado con useState, por ejemplo mantener value y setValue; crear una función handleChange que se ejecute en onChange del input; dentro de esa función eliminar todo lo que no sea dígito aplicando una expresión regular que reemplace cualquier carácter no numérico; limitar la cadena resultante a un máximo de 10 dígitos; construir una versión formateada según la longitud actual: si hay 3 o menos dígitos usar la cadena tal cual, al superar 3 y hasta 6 envolver los tres primeros en paréntesis y concatenar el resto como (123)456, y cuando hay más de 6 insertar un guion antes de los últimos dígitos resultando en (123)456-7890; finalmente asignar el valor formateado al estado para que el input muestre el formato automático mientras se escribe.

Comportamiento esperado paso a paso: al introducir 1 2 3 aparece 123, al añadir el cuarto dígito aparece (123)4, al llegar al sexto aparece (123)456 y al escribir el séptimo aparece (123)456-7; el control ignora letras, espacios y símbolos y no permite más de 10 dígitos.

Consejos prácticos: mantener la lógica de filtrado y formateo en el manejador onChange para que la experiencia sea reactiva y consistente; si se necesita compatibilidad con pegado de texto el mismo método de reemplazo de no dígitos asegura que solo se conserven números; considerar manejo de cursor avanzado si es necesario para una UX perfecta en ediciones intermedias.

Ejemplo de atributo usado en pruebas y en markup de referencia data-testid=phone-number-input que puede colocarse en el input para tests automatizados.

Acerca de Q2BSTUDIO: en Q2BSTUDIO somos una empresa de desarrollo de software especializada en aplicaciones a medida y software a medida, con experiencia en inteligencia artificial, ciberseguridad y servicios cloud aws y azure. Ofrecemos soluciones que combinan diseño de aplicaciones a medida, integración de agentes IA e ia para empresas y servicios de inteligencia de negocio como power bi para ayudar a tomar decisiones basadas en datos. Si buscas construir una aplicación personalizada o escalar tu producto, consulta nuestras opciones de desarrollo en desarrollo de aplicaciones multiplataforma y para proyectos orientados a modelos y automatización visita nuestras soluciones de inteligencia artificial.

Palabras clave incluidas para posicionamiento natural aplicaciones a medida software a medida inteligencia artificial ciberseguridad servicios cloud aws y azure servicios inteligencia de negocio ia para empresas agentes IA power bi. Si necesitas ayuda práctica para implementar el componente o integrar la solución en una app real, el equipo de Q2BSTUDIO puede acompañarte desde el diseño hasta la puesta en producción.