获取红色边框验证

Question

我是React的新手，我正在使用普通的Javascript来验证表单，如下所示：

<TextField
label="Title"
variant="outlined"
size="small"
name="Title"
id="Title"
placeholder="Enter the Title of the Best Practice"
onChange={handleChange("Title")}
defaultValue={values.Title}
style={{ width: "80%" }}
/>
<label id="title" style={{ visibility: "hidden" }}>
Title must be atleast 3 characters long
</label>
<br />

continue = e => {
e.preventDefault();
if (document.getElementById("Title").value.length < 3) {
document.getElementById("title").style.visibility = "visible";
// keep form from submitting
} else {
// else form is good let it submit, of course you will
// probably want to alert the user WHAT went wrong.
this.props.nextStep();
}
};

每当长度小于 3 时，它就会显示隐藏标签。但是，我还想突出显示长度小于 3 的红色文本框。我们如何做到这一点？

Answer 1

首先，你为什么要在你的反应应用程序中使用 javascript 验证？你用javascript所做的将更新Real DOM，在ReactJS中，我们使用Virtual DOM。我建议你先读完这篇文章：虚拟DOM。

另一件事，编写一个用于验证的函数，该函数将根据您要提供的验证返回 true 或 false。 在提交表单时绑定一个方法，如下所示：

submitForm(e){
e.preventDefault();
if(this.validateValues()){
this.setState({validated: true})
}
else
this.setState({validated: false})
}

现在，您可以为组件提供一个类名或任何您想要相应地设置样式的内容

<Component className={this.state.validated ? 'redBorder' : 'originalClass'} />

并在 CSS 中提供.redBorder{ border-color: 'red' }.

这是看待它的一种方式。