Estaba tratando de desarrollar un formulario típico, pero tuve un problema al mostrar el número de teléfono sobre la máscara. Cuando ingreso un número de teléfono en la entrada adecuada, no muestra datos reales. Por ejemplo: cuando ingreso 1,2,3, muestra: ++ ++ 7 1. Cuando presiono el botón Retroceso, agrega caracteres en lugar de eliminarlos. Mi función, que toma números (número de teléfono unido) y devuelve números formateados, funciona bien. No sé por qué sucedió este problema y cómo solucionarlo. Probablemente, el problema no es con la función phoneNumberMask, sino con el código rodeado. Por favor, ayúdame a entender cuál es el problema y cómo solucionarlo. gitHub: https://github.com/AlexKor-5/FormChallenge/commit/011b79d2009fea70b028e5335e67e73988a46124 ¡Gracias por adelantado!

src/components/PhoneNumberInput/PhoneNumberInput.js

 import React, { useState } from 'react' import { TextField } from 'formik-mui' import { Field } from 'formik' import phoneNumberMask from '../../services/phoneNumberMask/phoneNumberMask' console.log( phoneNumberMask({ mask: '+x xxx xxx xx xx', phone: '78905556781', visible: false, }) ) export const PhoneNumberInput = ({ text, name }) => { const [click, setClick] = useState(true) const [entered, setEntered] = useState('') const handleChange = event => { // setEntered(event.target.value) setEntered( phoneNumberMask({ mask: '+x xxx xxx xx xx', phone: event.target.value, visible: false, }) ) } const handleClick = () => { click && setEntered('+7') setClick(false) } return ( <Field component={TextField} label={text} value={entered} name={name} variant="outlined" fullWidth onChange={handleChange} onClick={handleClick} /> ) }

 const phoneNumberMask = obj => { let i = -1 let resMask = '' const change = (mask, phoneNumber) => { if (i > phoneNumber.length) return i++ resMask = mask.toLowerCase().replace(/x/i, phoneNumber[i] || 'x') change(resMask, phoneNumber) } change(obj.mask, obj.phone) return obj.visible ? resMask : resMask .split('') .filter(s => s !== 'x') .join('') } export default phoneNumberMask