No se puede borrar el valor que está ingresando en el campo de entrada, incluso después de hacer clic en la tecla de retroceso, no se está borrando. un valor permanece constante en el campo de entrada
import * as React from "react"; import { Button, Form } from "react-bootstrap"; function Adminform() { const [docId, setdocId] = React.useState(""); const errorHandle = (name, value) => { const errors = {} if (name === "docID") { if (value === '') { errors.docID = "Doctor ID Required" } else { setdocId(value) } } setError(errors) } return ( <div className="center"> <div className="select"> <h2>Register Your Appointment</h2> <Form method="POST"> <div> <label htmlFor="docID">Enter Hospital Name:</label> <input required type="text" id="docID" name="docID" onKeyPress={(event) => { if (!/[0-9]/.test(event.key)) { event.preventDefault(); } }} value={docId} onChange={(e) => errorHandle(e.target.name, e.target.value)} placeholder="Doctor ID" /> <p style={{ color: "red" }}>{error.docID}</p> </div> </Form> </div> </div> ) } export default AdminformAntes de ingresar los valores Ingresó el valor aleatorio Incluso después de hacer clic en la tecla de retroceso, un valor permanece constante en el campo de texto
No está manejando completamente el valor de entrada. Dado que aplica la verificación de que si el valor === '', simplemente configure el error. Simplemente consuele el valor en la función errorHandle, verá que obtendrá la cadena vacía, pero como no está configurando el estado '', el valor de entrada no se actualiza y sigue siendo el último valor. Puedes hacerlo:
const errorHandle = (name, value) => { setdocId(value); const errors = {}; if (name === 'docID') { if (value === '') { // Set the error } else { setdocId(value); } } }; No agregue verificación de valor vacío. Solo actualiza el estado. Puede verificar si el value está vacío y luego configurar el error.
Funcionó bien cambiando el código de la siguiente manera
const errorHandle = (name, value) => { const errors = {} if (name === "docID") { if (value === '') { setdocId(value) errors.docID = "Doctor ID Required" } else { setdocId(value) } } setError(errors) }