我如何正确地实现onBlur，我是否忽略了另一个问题

Question

我正在尝试为我创建的react表单实现表单验证。我有一个onChange来设置每个文本字段的状态值，还有一个onBlur验证函数，它根据regex测试值。然而，在我单击另一个组件并开始键入之前，该组件似乎不会更新其错误状态的true(因此不会变为红色，通知用户该字段包含不正确的内容(。

这里是validateOnBlur函数：

validateOnBlur = field => e => {
e.preventDefault();
const { nameRegex, emailRegex } = regex;
let errors = this.state.errors
console.log(!nameRegex.test(e.target.value))
switch (field) {
case 'name':
errors.nameError = !nameRegex.test(e.target.value)
break;
default: 
break;
}
}

这是Material UI中的文本字段组件，它有一个错误道具，当设置为true时，它会将组件变成红色：

<TextField
error={this.state.errors.nameError}
id="name"
placeholder="First/Last"
label="Legal Name"
value={this.state.name}
onChange={this.handleTextField("name")}
onBlur={this.validateOnBlur("name")}
fullWidth
/>

Answer 1

您永远不会更新state中的新错误。使用setState而不是errors.nameError = !nameRegex.test(e.target.value)，并将其实际应用于

this.setState({ errors: { ...errors, nameError: !nameRegex.test(e.target.value) } });