ReactJS:更改特定元素 ID 的输入字段边框颜色

Question

我很难根据所选元素的ID更改输入字段边框颜色。

我尝试过像 vanilla JavaScript

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 来验证必填字段。

有什么提示吗？

Answer 1

您可以向组件添加状态，然后将它们传递给组件样式。

Answer 2

用此代码替换您的行。

document.getElementById('user').style.border = '1px solid red';
document.getElementById('password').style.border ='1px solid red';

您将边界调用为函数，但它是一个属性。