• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

148
Views
Actualizar el estado cuando el valor de entrada no coincide con el patrón

Quiero actualizar el estado "errorFlag" cuando el usuario ingresó valores que no coinciden con el patrón, ¿cómo se puede hacer esto para validar el valor de entrada?

 const [errorFlag, setErrorFlag] = useState(false); <Input name='E-Mail-Address' type='email' pattern="^[a-zA-Z0-9._:$!%-]+@[a-zA-Z0-9.-]+.[a-zA-Z]$" errorMessage="* Invalid E-Mail-Address" onChange={setEmail1} error={email1 === ''} required={true} />

Entrada de formulario

 import React from "react"; export interface InputProps { .... onChange?: (value: string) => 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); } render() { return ( <div key="form-name" className="formrow" style={{...this.props.style}}> <input type={this.props.type??"text"} placeholder={' '} id={id} className="forminput" pattern={this.props.pattern} onChange={this.onChange} required={this.props.required} /> <span id="formInput-errorspan" className="errorSpan">{this.props.errorMessage}</span> </div> ); } }
almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Puede usar el método checkValidity simplemente devolviendo verdadero o falso.

 export default function App() { const [errorFlag, setErrorFlag] = useState(false); const [email, setEmail] = useState(""); const onChange = (e) => { setErrorFlag(e.target.checkValidity()); setEmail(e.target.value); }; return ( <div className="App"> {errorFlag ? "Valid" : "Invalid"} <br /> <Input name="E-Mail-Address" type="email" pattern="^[a-zA-Z0-9._:$!%-]+@[a-zA-Z0-9.-]+.[a-zA-Z]$" errorMessage="* Invalid E-Mail-Address" onChange={onChange} required={true} /> {email} </div> ); }

Aporte

 ... private onChange = (event: React.ChangeEvent<HTMLInputElement>) => { this.setState({ value: event.target.value }); this.props.onChange(event); } ...

Manifestación

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error