根据状态动态更新类名样式

Question

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

注册表单.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的className属性上。我想在authoriseInput中添加一个样式，用于在触发error.email时设置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

您可以像渲染组件部件一样有条件地设置classNames。

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