0
316
Vistas¿Cómo implementar dos métodos de validación en un formulario en la reacción?
Tengo un proyecto que solo me permite cambiar este archivo (archivo a continuación). Otros archivos están completos, por esta razón, no los coloco aquí (tampoco alargue el código). Mi pregunta es solo sobre la implementación de dos métodos de validación en este archivo.
dominio:
No se muestra un error durante el primer enfoque en la entrada hasta que se quita el enfoque. Si hay un error, se muestra. y las próximas veces, durante el cambio si se encuentra con un error, se muestra el mismo tiempo.
Implementé la primera sección del comando anterior, ¿cómo hago para la segunda sección en el mismo archivo? ¿Con 'useEffect'? ¿Cómo? Gracias por cualquier ayuda.
entrada.js
import {useState} from "react"; import {validate} from './validators'; const INPUT_STATES = { /*this is not used!*/ UNTOUCHED: 'UNTOUCHED', VALID: 'VALID', INVALID: 'INVALID' }; const myValidate= validate; /*validate is the my validation function*/ const Input = props => { const [value,setValue] = useState(''); const [validate,setValidate] = useState(true); const handleChange = (e) => { setValue(e.target.value); } const handleValidate = () => { const Validate = myValidate(value,props.validators); setValidate(Validate); } return ( <div className={`form-input ${validate ? '' : 'form-input--invalid'}`} data-testid="form-input"> <label htmlFor={props.id}>{props.label}</label> <input value={value} type={props.type} id={props.id} onChange={handleChange} onBlur={handleValidate} /> <p>{validate ? '' : props.errorText}</p> </div> ) }; export default Input; 
1 Respuestas
Responde la pregunta0
Resolví el problema anterior agregando dos If dentro de handleChange y handleValidate . Además, definí otro useState .
Además, cambié el primer parámetro de myValidate, de value a e.target.value .
entrada.js:
import React from "react"; import {useState} from "react"; import {validate} from './validators';/*This file is cantains validation rulles.*/ const myValidate = validate; /*validate is the my validation function*/ const Input = props => { const [value,setValue] = useState(''); const [validate,setValidate] = useState(true); const [valid,setValid] = useState('VALID'); const handleChange = (e) => { setValue(e.target.value); if(valid === 'INVALID'){ handleValidate(e); } } const handleValidate = (e) => { const Validate = myValidate(e.target.value,props.validators); setValidate(Validate); if(!Validate){ setValid('INVALID'); } } return ( <div className={`form-input ${validate ? '' : 'form-input--invalid'}`} data-testid="form-input"> <label htmlFor={props.id}>{props.label}</label> <input value={value} type={props.type} id={props.id} onChange={handleChange} onBlur={handleValidate} /> <p>{validate ? '' : props.errorText}</p> </div> ) }; export default Input;Ahora:
No se muestra un error durante el primer enfoque en la entrada hasta que se quita el enfoque. Si hay un error, se muestra. y las próximas veces, durante el cambio si se encuentra con un error, se muestra el mismo tiempo.