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
            });
        })

但是由於無法呈現修改后的子元素的錯誤而失敗了。

我還為必填字段指示設置了 styles

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

用此代碼替換您的行。

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

您將邊框稱為 function 但它是一個屬性。

Answer 2

您可以將狀態添加到組件並將它們傳遞給組件 styles。