Question

我在我的项目中使用React Hooks，并且需要尝试弄清楚如果状态值更改，如何将类动态地添加到className中。我正在使用react-hook-form来验证表单。

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

第二部分正常工作，当出现错误时，将显示<p>标签。但是我仍然坚持如何以相同的方式更新input的{{1}}属性。我想向className添加样式，以在触发authoriseInput时设置border-color。

任何建议都将不胜感激。

谢谢！

Answer 1

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

Answer 2

您可以有条件地设置Cust_ID Ball Bat Bat Lego Lego 0 A 2.0 1.0 NaN 3.0 NaN 1 B 11.0 11.0 13.0 3.0 9.0 2 C NaN 2.0 NaN 2.0 NaN，方法与渲染零部件相同。

classNames

根据状态动态更新className样式

2 个答案: