“无效”选择器在初始渲染时为 false TailwindCSS React

问：

问题：

我希望“无效”选择器在初始渲染时为 false，也就是说，如果用户刚刚访问了表单或刷新了页面，则 ：invalid 属性不应为 true。仅当用户可以专注于输入一次并输入无效属性时，无效才应为 true。

法典：

这是发送到输入的代码，因此，如果用户输入的值长度小于 5，则无效值应为 true

如果图像无效，则轮廓应为红色，如果聚焦轮廓应为蓝色，则如果没有轮廓，则应为黑色

当 invalid 为 true 时

专注时

违约

解释：

当用户首次访问窗体时，由于输入的值小于 5，因此无效属性为 true，因此轮廓为红色。我希望大纲仅在以下情况下为红色：

1- 用户至少关注过该输入一次

2- 输入值无效

3- 用户对输入的注意力不集中。

条件 2 和 3 正在工作，但即使用户甚至没有集中注意力，无效属性仍然为 true

预期输出：

预期输出