Question

当登录不存在时，我尝试在输入中添加React红色边框。我想出了一种在输入中添加类的方法，但是我认为这不是一个好习惯。我该怎么写呢？

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.3/daterangepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.3/daterangepicker.min.js"></script>

<br><br>
<p style="margin-left:10px;"><input type="text" name="daterange" value="" /></p>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br> force some scrolling

Answer 1

当出现错误时，您可以有条件地使用类名添加类，并且还会显示错误消息。此外，您可以从上述代码中删除冗余，例如

{
     <Fragment>
        <input
          className={classNames(
            classes.formItem, {
            [classes.formError]: loginError
          })}
          placeholder="write number"
          name="login"
          type="text"
          onChange={this.handleChange}
        />
        {loginError ? <div className={classes.textError}>{loginError}</div>: null}
    </Fragment>
}

当状态在React中不为null时更改样式组件

1 个答案: