Estoy tratando de validar un campo de texto de correo electrónico con un botón. Estoy usando accesorios para almacenar el estado de error del campo de texto del correo electrónico.
Correo electrónico Código de campo de texto:
<TextField required error={values.emailInvalid} id="emailAddress" name="emailAddress" label="Email Address" onChange={handleChange("email")} defaultValue={values.email} fullWidth autoComplete="" variant="standard" />Código del botón:
var re = /\S+@\S+\.\S+/; var testEmail = re.test(this.props.values.email); if (this.props.values.email.length === 0 || !testEmail) { this.props.values.emailInvalid = true; } else { this.props.values.emailInvalid = false; //go next page } console.log(this.props.values.emailInvalid);El booleano "emailInvalid" se actualiza correctamente de acuerdo con la salida de la consola, pero TextField no muestra visiblemente que el estado de error rojo es "emailInvalid" establecido en verdadero.
No puede simplemente asignar el valor de emailInvalid con this.props.values.emailInvalid = true .
Si los valores son un objeto de estado, también debe pasar la función setState en accesorios y usarla como se muestra a continuación
this.props.setState({ emailInvalid:true }) Además, debe usar this.props.values en lugar de values en el componente TextField
La forma en que está cambiando las cosas en React no es compatible. puedes seguir esta guía: En primer lugar: LOS PROPS SON DE SÓLO LECTURA y no puedes cambiarlos. En segundo lugar, para cambiar las cosas que deben mostrarse en el navegador a medida que cambia se realiza a través de Estado. para corregir su error, primero importe useState como: (estamos usando estados como gancho)
import {useState} from "react";entonces tienes que usar tu estado e inicializar la cantidad:
const [emailIsValid, setEmailIsValid] = useState(true)esto establecerá el valor inicial de emailIsValid en verdadero.
ahora, cada vez que desee cambiar el valor de emailIsValid, debe llamar a la función set y establecer el valor como: setEmailIsValid (falso)
ahora puede usar emailIsValid en cualquier lugar de su componente de reacción.
Debe usar setState para mutar el estado del componente, por ejemplo
SetEmailInvalid(true);para componentes basados en clases:
this.setState({emailInvalid: true});No puede editar el estado de reacción directamente. Abra este enlace para ver por qué