javascript - 当 React 中的 state 不为 null 时更改样式组件

Question

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

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

标签： javascriptreactjs

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>
}