我很难根据其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一起用于验证必填字段。

有什么提示吗?

最佳答案

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

09-25 17:29
查看更多