如何在React.js中显示验证?

Question

我想在name为空时显示验证检查。

代码

state = {
name: "",
nameFeedback: false,
nameValidationMessage: ""
};
nameValidator = () => {
this.setState({
nameFeedback: true
});
const newName = `${this.name.value || ''}`.trim();
if (newName === "") {
this.setState({
name: false,
nameValidationMessage: "Name cannot be empty"
});
}
};
render() {
return (
<div className="App">
<input
type="text"
name="name"
ref={(input) => {
this.name = input;
}}
onBlur={this.nameValidator}
/>
{this.state.nameFeedBack && !this.state.name && (
<small className="help-block">
{this.state.nameValidationMessage || "This value is not valid"}
</small>
)}
</div>
);
}

当我离开输入框而不输入任何字符时，它不显示错误。

Answer 1

这个setState有一个拼写错误

this.setState({
nameFeedback: true
});

由替换

this.setState({
nameFeedBack: true
});