0
237
VistasCómo restablecer los valores del formulario usando el arranque de reacción
Mi objetivo después de hacer clic en el botón de registro es:
- Dejar los campos de entrada en blanco
- No mostrar información sobre herramientas de error
Aquí está el enlace en CodeSandbox
Ya he intentado usar event.target.reset(); sin embargo, la información sobre herramientas sigue apareciendo en la pantalla.
export default function App() { const [showSucessAlert, setshowSucessAlert] = useState(false); const [validated, setValidated] = useState(false); const [transitionAlert, setTransitionAlert] = useState(false); const handleSubmit = (event) => { const form = event.currentTarget; event.preventDefault(); if (form.checkValidity() === false) { event.stopPropagation(); } else { handleClickTransitionAlert(); setshowSucessAlert(true); } setValidated(true); }; const handleClickTransitionAlert = () => { setTransitionAlert(true); setTimeout(() => { setTransitionAlert(false); }, 1700); }; return ( <Form noValidate validated={validated} onSubmit={handleSubmit}> <Form.Group className="position-relative" controlId="validationPassword"> <Form.Label>Password</Form.Label> <InputGroup hasValidation id="validationPassword" /> <Form.Control type="password" aria-describedby="validationPassword" required /> <Form.Control.Feedback tooltip type="invalid"> Please enter your Password. </Form.Control.Feedback> </Form.Group> <Alert className={`mt-1 p-1 position-fixed ${ transitionAlert ? "alert-shown" : "alert-hidden" }`} show={showSucessAlert} variant="success" > Registered user! </Alert> <Button className="mt-5" variant="primary" type="submit"> Register </Button> </Form> ); } 
Aquí está el enlace en CodeSandbox
Toda ayuda es bienvenida!
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Normalmente no uso componentes no controlados, pero creo que podría resolver esto agregando setValidated(false) y event.target.reset() a handleClickTransitionAlert , así:
const handleClickTransitionAlert = (event) => { setTransitionAlert(true); setTimeout(() => { setTransitionAlert(false); setValidated(false) event.target.reset() }, 1700); };
·
Juan Pablo Isaza
Denunciar
0
Intente restablecer el atributo validado en el formulario Bootsrap. debería verse así (esto es pseudo-código):
import React, { useRef, useState } from 'react'; const FormComponent = () => { const [validated, setValidated] = useState(false); const formRef = useRef(null); const handleReset = () => { formRef.current.reset(); setValidated(false); }; const handleSubmit = () => { // Do stuff here // On success or error: setValidated(true); handleReset(); } return( <Form ref={formRef} validated={validated} onSubmit={handleSubmit}> // your form inputs </Form> ); export default FormComponent; }
·
Juan Pablo Isaza
Denunciar
Responde la pregunta