我很难根据其ID更改所选元素的输入字段边框颜色。
我已经尝试过像
fetch("/login?"+query, {
method: "GET",
headers: {
"Access-Control-Allow-Origin": "*"
},
credentials: "include"
}).then(response => {
status = response.status;
return response.json()
}).then(data => {
if (status==200) {
//log in
}
else {
if (status==404) {
document.getElementById('user').style.border('1px solid red');
document.getElementById('password').style.border('1px solid red');
}
}
}).catch(err => {
setErrors({
systemErr: err
});
})
但是失败的原因是无法呈现修改后的子元素的错误。
我也为必填字段指示设置了样式
style={getStyles(touched, props.errors, 'password')}
然后
function getStyles (touched, error, fieldName) {
if (errors[fieldName] && touched[fieldName]) {
return {
border: '1px solid red'
}
}
};
效果很好,但是当API也不会返回任何内容时,我需要添加边框。旁注-我将Formik与Yup一起用于验证必填字段。
有什么提示吗?
最佳答案
您可以只向组件添加状态,然后将它们传递给组件样式。