Estoy usando onBlur para cambiar el estado del error, para validar el valor en el componente de entrada. Pero a medida que el usuario hace clic fuera de la entrada, tarda unos segundos hasta que puede volver a hacer clic en la entrada para cambiar el valor.

¿Alguien puede saber por qué sucede esto? Otra pregunta, ¿cómo puedo cambiar el tipo de evento devuelto por onBlur para que no sea 'cualquiera'?

Formulario.tsx

 const [errorFlag, setErrorFlag] = useState(false); const [plz, setPLZ] = useState<string | undefined>(undefined); const onBlur = (e:any) => { setErrorFlag(e.target.checkValidity()); }; return (<Fragment> ... <Input onChange={setPLZ} name="PLZ" pattern="^[0-9]{5}$" errorMessage="* Invalid Postal Code" error={plz === ''} required={true} onBlur={onBlur} style={{ flexGrow: 0, width: '100px', marginRight: '20px' }} /> </Fragment>)

Entrada de formulario.tsx

 export interface InputProps { ... onChange?: (value: string) => void; onBlur?:(event: React.ChangeEvent<HTMLInputElement>) => void; } export class Input extends React.Component<InputProps, { value: string; }> { constructor(props: InputProps) { super(props); this.state = { value: '' }; } private onChange = (event: React.ChangeEvent<HTMLInputElement>) => { this.setState({ value: event.target.value }); this.props.onChange?.(event.target.value); } private onBlur = (event: React.ChangeEvent<HTMLInputElement>) => { this.props.onBlur?.(event); } render() { return ( <div key="form-name" className="formrow" style={{...this.props.style}}> <input ... onChange={this.onChange} onBlur={this.onBlur} /> <span id="formInput-errorspan" className="errorSpan">{this.props.errorMessage}</span> </div> ); } }