Me gustaría resaltar EMAIL TextField como no válido no inmediatamente, sino después de 5 segundos, el usuario comienza a escribir. Entonces, el usuario escribe y luego se detiene después de 5 segundos, valida el campo y marca como no válido si hay un error. Estoy tratando de usar la función antirrebote, pero parece que no funciona con la propiedad de error TextField. ¿Es el buen enfoque?
const [email, setEmail] = useState(''); export const emailHasError = (email) => { .... return true; // if error } <TextField id="filled-basic" label="email" variant="filled" fullWidth error={email.length > 0 && debounce(emailHasError(email), 3000)} value={email} onChange={(e) => setEmail(e.target.value)} />En su método, debounce no devolverá el valor que está devolviendo desde la función interna. debounce devolverá un temporizador por lo que siempre será cierto
He agregado un estado más para almacenar el valor no válido. y usando la misma función de rebote onkeyUp.
const [email, setEmail] = useState(''); const [invalidEmail, setInvalidEmail] = useState(false) export const emailHasError = (email) => { .... setInvalidEmail(true) // if error } const checkEmail = () => { setInvalidEmail(false); debounce(emailHasError(email), 3000) } <TextField id="filled-basic" label="email" variant="filled" fullWidth error={invalidEmail} value={email} onKeyUp={checkEmail} onChange={(e) => setEmail(e.target.value)} />