在验证时获得红色边框答案

【问题标题】：Getting the red border on validate在验证时获得红色边框
【发布时间】：2020-06-09 12:43:02
【问题描述】：

我是 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 时将文本框突出显示为红色。我们该怎么做？

【问题讨论】：

标签： javascript reactjs react-redux material-ui dom-events

【解决方案1】：

首先，你为什么在你的 react 应用中使用 javascript 验证？您使用 javascript 所做的将更新 Real DOM，而在 ReactJS 中我们使用 Virtual DOM。建议你先看完这篇文章：Virtual DOM。

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

submitForm(e){
    e.preventDefault();

    if(this.validateValues()){
      this.setState({validated: true})
    }
    else
      this.setState({validated: false})
  }

现在，你可以为你的组件提供一个 className 或者任何你想要的样式

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

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

这是看待它的一种方式。

【讨论】：