React-错误状态更改后，MUI TextField错误不会明显显示

Question

我正在尝试使用按钮验证电子邮件TextField。我正在使用props来存储电子邮件TextField的错误状态。

电子邮件文本字段代码：

<TextField
required
error={values.emailInvalid}
id="emailAddress"
name="emailAddress"
label="Email Address"
onChange={handleChange("email")}
defaultValue={values.email}
fullWidth
autoComplete=""
variant="standard"
/>

按钮代码：

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);

"；emailInvalid"；boolean根据控制台输出正确更新，但TextField没有明显显示红色错误状态为"；emailInvalid"；设置为true。

Answer 1

不能仅将emailInvalid的值分配给this.props.values.emailInvalid = true
如果值是一个状态对象，您还需要在props中传递setState函数，并像下面的一样使用它

this.props.setState({ emailInvalid:true })

此外，您应该在TextField组件中使用this.props.values而不是values

Answer 2

您需要使用setState来更改组件状态，例如

SetEmailInvalid(true);

对于基于类的组件：

this.setState({emailInvalid: true});

不能直接编辑反应状态。打开此链接查看的原因

Answer 3

不支持在React中更改内容的方式。您可以遵循以下指南：首先：PROPS是只读的，您不能更改它们。其次，更改必须在浏览器中显示的内容是通过State完成的。要修复您的错误，请首先导入useState，如：(我们使用状态作为挂钩(

import {useState} from "react";

然后你必须使用你的状态并初始化金额：

const [emailIsValid, setEmailIsValid] = useState(true)

这将把emailIsValid的初始值设置为true。

现在，每当您想更改emailIsValid的值时，都必须调用set函数并设置如下值：setEmailIsValid(false(

现在，您可以在react组件中的任何位置使用emailIsValid。