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

我很难根据选定元素的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（toucted，props.errors，'password'）}

然后

这很好，但是当API不会返回任何东西时，我需要有一个边界。旁注-我正在使用带有Yup的Formik来验证必填字段

---

有什么建议吗

用此代码替换您的行

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

---

您正在将border作为函数调用，但它是一个属性。

用此代码替换您的行

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

---

---

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

您只需将状态添加到组件并将其传递到组件样式。

您只需将状态添加到组件并将其传递到组件样式。

仍然存在相同的问题：

对象作为子对象无效（找到：TypeError:无法读取null的属性“style”）。如果您想呈现子对象集合，请使用数组。

是否在

componentDidMount

中调用此函数？是否有完整的React组件代码？请共享。@PrabhatKumar否，我没有-我在OP@Ranjith太大，只在上面显示的代码上失败。认为当获取API时，更改边框很简单。仍然存在相同的问题：

对象作为React子对象无效（找到：TypeError:无法读取null的属性“style”）。如果您想呈现子对象集合，请使用数组。

是否在

componentDidMount

中调用此函数？是否有完整的React组件代码？请共享。@PrabhatKumar否，我没有-我在OP@Ranjith太大，只在上面显示的代码上失败。认为当获取API时，很容易更改边框。我已经做了类似的操作来指示必填字段，这很有效。我已经用代码井的这一部分更新了OP。这个答案为我指明了正确的方向。我已经更新了一个状态，在这种情况下两个必填字段都有。我已经做了类似的操作来指示必填字段字段，这是有效的。我用codeWell的这一部分更新了OP。这个答案为我指明了正确的方向。我已经更新了一个状态，在这种情况下有两个必填字段。我不确定，为什么混合

React

和direct

DOM

操作。你可以通过

reudx

状态轻松管理API失败/成功d基于该道具，您可以向输入中添加新类。@SandipNirmal我是Redux新手，刚开始在该登录页面中使用它，但只是在登录后存储数据。没想到会因为API失败/成功而使用它。您能给我指一些示例吗？谢谢！您可以看看这个。这是我很久以前创建的。您可以看看

loginReducer

。你应该知道了。顺便说一句，repo需要一些更新。我不知道为什么你要混合

React

和直接

DOM

操作。你可以很容易地用

reudx

状态管理API失败/成功，并且基于这个属性，你可以向输入添加新类。@SandipNirmal我是Redux的新手，刚刚开始ed希望在登录页面中使用它，但只是在登录后存储数据。没想到API会失败/成功。你能给我指一些例子吗？谢谢！你可以看看这个。这是我很久以前创建的。你可以看看

loginReducer

。你应该知道。顺便说一句，repo需要一些更新。