Soy nuevo en reaccionar e intento crear un formulario de varios pasos usando reactjs, Material-ui, en este formulario, la validación y los botones de envío funcionan perfectamente bien. pero tengo un problema con el código que, el archivo está vacío e intento ir al segundo paso, se produce un error, pero cuando lleno ese archivo. el error sigue apareciendo. y finalmente hago clic en siguiente después de llenarlo y vuelvo al primer paso. desaparecerá Quiero que cuando escriba un error activo, el mensaje de error desaparezca automáticamente.
DEMO está AQUÍ
Debe crear una función onChangeField en MultiStepForm y configurarla como onChange en todo su campo. Para que pueda validar si los errores incluyen el campo
MultiStepForm.js
const onChangeField = (fieldName, value) => { setFormData({ ...formData, [fieldName]: value }); if (errors.includes(fieldName)) checkValidation(activeStep); };Paso Uno.js
<TextField required type="text" name="firstName" style={{ width: "100%", margin: "1rem 0" }} label="First Name" variant="outlined" value={formData.firstName} error={errors.includes("firstName")} onChange={(event) => onChangeField("firstName", event.target.value)} /> <TextField style={{ width: "100%", marginBottom: "1rem" }} label="Last Name" variant="outlined" name="lastName" required error={errors.includes("lastName")} type="text" value={formData.lastName} onChange={(event) => onChangeField("lastName", event.target.value)} /> <TextField style={{ width: "100%", marginBottom: "1rem" }} label="Email" variant="outlined" name="email" required error={errors.includes("email")} type="email" value={formData.email} onChange={(event) => onChangeField("email", event.target.value)} />Codesandbox ¡ Espero que te ayude!