Reactjs Formik-当字段有效时，高亮显示输入绿色

当字段在Formik中有效时，是否有一种简单的方法将输入边框颜色更改为绿色？我很难找到一个很好的例子——我不确定这个字段是否有一个有效的变量

我已经使用

{errors.fieldname}

将验证错误显示为红色，但也希望字段边界在字段有效后立即变为绿色（或具有某种类型的绿色复选标记）。

---

我正在使用

Yup

模式验证，如果这很重要。

如果

，您可以更改css以应用绿色边框！错误。表单验证时字段名

。您可以在

Formik

组件中使用

validateOnBlur

和

validateOnChange

，以便在键入或模糊字段时进行验证

也许您可以在输入上设置一个

onBlur

函数，并检查错误。如果模糊没有错误，可以设置一个状态变量来捕获字段有效的事实，并使用该变量应用类名

状态={
绿色边界：{
fieldName1:null，
fieldName2:null，
}
}
handleBlur=字段名=>{
如果（！错误[fieldName]）{
这是我的国家({
绿色边界：{
…这个州，绿色边界，
[字段名]：true
}
})
}
}
//在渲染中：
车把LUR（字段名称1）}
type=“text”
className={this.state.greenboder.fieldName1？'green'：''}
>

---

这只是一个一般的想法。您还可以将事件附加到

onChange

。您还可以使用

字段

组件的。希望这能让你开始。

也许可以给我们一些代码，看看你是如何/何时应用验证的，你到底在使用哪种formik组件？我想你删除的帖子正是我想要的

！errors.fieldname

-如果没有错误，这将起作用，但它可能通过Yup验证，也可能不通过Yup验证。我可以试着整理一些代码示例。是的，我删除了它，因为我意识到这是一个非常通用的答案，因为你的问题没有任何代码，所以我不知道如何用真实的代码示例正确回答。如果您觉得它有帮助或想将其用作起点，我可以取消删除它。

！错误。如果字段已验证，则fieldName

会验证它是否通过Yup验证。确保始终验证的方法有：（1）如果它适用于这种情况，可以将

validateOnMount

设置为true，以便从getgo开始验证所有内容。或者，您可以选中

toucted.fieldname

，并且仅当

toucted.fieldname&&时才将输入设置为绿色！错误。字段名

。（2） 确保将

handleBlur

传递到输入，以便在每个模糊事件和每个更改事件上运行验证。