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

Question

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

我尝试过普通的 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, '密码')}

然后

function getStyles (touched, error, fieldName) {
    if (errors[fieldName] && touched[fieldName]) {
        return {
            border: '1px solid red'
        }
    }
};

这工作得很好，但是当 API 也不会返回任何内容时，我需要得到一个边框。旁注 - 我使用 Formik 和 Yup 来验证必填字段。

对此有什么建议吗？

Answer 1

您只需向组件添加状态并将它们传递给组件样式即可。