基于状态动态更新类名样式

Question

我在我的项目中使用React钩子，需要尝试解决如何在状态值发生变化时动态地将类添加到类名中。我正在使用react hook表单验证我的表单。

RegisterForm.jsx

<input
  className={styles.authoriseInput}
  placeholder="Email"
  name="email"
  ref={register({required: true, minLength: 4})}  # supposed to be a regex, but too long for this question
/>
{errors.email &&
  <p className={styles.errors}>Please enter a valid email.</p>
}

第二部分正常工作，当出现错误时，

非常感谢您的建议。

谢谢




Answer 1

可以有条件地设置类名，方法与渲染零部件相同。

<input
  className={errors.email && styles.authoriseInput}
  placeholder="Email"
  name="email"
  ref={register({required: true, minLength: 4})}  # supposed to be a regex, but too long for this question
/>
{errors.email &&
  <p className={styles.errors}>Please enter a valid email.</p>
}

Answer 2

向clasName属性添加条件

<input
   className={errors.email ? styles.errorInput : styles.authoriseInput}
   placeholder="Email"
   name="email"
   ref={register({required: true, minLength: 4})}  # supposed to be a regex, but too 
   long for this question
/>
{errors.email &&
    <p className={styles.errors}>Please enter a valid email.</p>
}