Formik -当字段有效时，突出显示输入绿色
Formik -当字段有效时，突出显示输入绿色
提问于 2020-07-30 08:52:53
当字段在Formik中有效时，有没有简单的方法将输入边框颜色更改为绿色？我很难找到一个很好的例子--我不确定这个字段是否有一个有效的变量？
我已经有使用{errors.fieldname}显示为红色的验证错误，但也希望字段边框在字段有效时立即变为绿色(或具有某种类型的绿色复选标记)。如果重要的话，我将使用Yup模式验证。
回答 1
Stack Overflow用户
发布于 2020-07-30 09:13:28
如果表单验证为!errors.fieldname，您可以更改css以应用绿色边框。您可以在Formik组件中使用validateOnBlur和validateOnChange，以便在您键入或模糊掉一个字段时进行验证。
也许您可以在您的输入上添加一个onBlur函数，并检查错误。如果模糊没有错误，您可以设置一个状态变量来捕获字段有效的事实，并使用它来应用className。
state = {
greenborder: {
fieldName1: null,
fieldName2: null,
}
}
handleBlur = fieldName => {
if (!errors[fieldName]) {
this.setState({
greenborder: {
...this.state.greenborder,
[fieldName]: true
}
})
}
}
// in render:
<input
onBlur={() => handleBlur(fieldName1) }
type="text"
className={this.state.greenboder.fieldName1 ? 'green' : ''}
>这只是一个通用的想法。您还可以将事件附加到onChange。您还可以使用Field组件的validate prop。希望这能让你开始学习。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63164569
复制相关文章
相似问题
腾讯云开发者
