访问 JSX 元素的类列表属性

Question

我有以下问题：我想要一个类似 'password status bar' 的类型，告诉用户哪个密码已经满足并且必须满足的条件，但是当我尝试访问我的标签的类列表时，我收到错误 'Cannot read property add of undefined'，当我尝试 console.log 类列表时，我也得到了未定义。我在标签中使用 refs，所以我可以访问属性。我还尝试使用状态变量来实现它，但是当我尝试读出引用时，我总是得到 null。首先，我尝试只在 returns 标签的另一个组件的方法中制作该组件，但每次我也都未定义。

(password和password1是另外一个组件的输入（是重置密码的密码，所以你必须确认新密码）为了测试目的，我设置了pass和pass1应该是password和password1一个简单的字符串))

（我也在使用 react-bootstrap 进行样式设置（如果相关））我想知道如何访问反应元素的类列表属性，请向我解释我犯了什么错误。

代码：

import React, {useEffect, useState} from 'react';
import {Input, Form, Button} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function PasswordStatus ({password}, {password1}) {

    // const [output, setOutput] = useState('');
    const names = [`[A-Z]`, `[a-z]`, `[0-9]`, `>10 & <26`, `Special`, `Ident`];
    const regexes = [/[A-Z]/g, /[a-z]/g, /[0-9]/g, /^{10, 26}$/, /[ !@#$%^&*()_+\-=\[\]{};':"\|,.<>\/?~]/];
    const refNames = [];
    const pass='Hello';
    const pass1='Hello2';


    for(let i=0; i<names.length; i++) {
        refNames[i] = React.createRef();
    }

    useEffect(() => {
        // setOutput(names.map((item, index) => {
        //     return <label className='d-inline' ref={refNames[index]}>{`${item}\u00A0\u00A0`}</label>
        // }));
        for(let j=0; j<names.length; j++) {
            console.log(refNames[j]);
            if(pass.match(regexes[j]) ===null || pass1.match(regexes[j])===null) refNames[j].classList.add('text-danger');
            else refNames[j].classList.add('text-success');
         }
    }, []);

    // useEffect(() => {
    //     console.log(refNames);
        
    //     console.log(refNames[0]);
    //     let i = refNames[0];
    //     console.log(i.classList);
    //     console.log(output);
        // for(let j=0; j<names.length; j++) {
        //     console.log(refNames[j]);
        //     if(pass.match(regexes[j]) ===null || pass1.match(regexes[j])===null) refNames[j].classList.add('text-danger');
        //     else refNames[j].classList.add('text-success');
        //  }
    // }, [output]);


    return(
    <>
   {names.map((item, index) => {
       return <label className='d-inline' ref={refNames[index]}>{`${item}\u00A0\u00A0`}</label>
     })}
   {/* {output} */}
  </>
   );
}

export default PasswordStatus;

Answer 1

您是在 ObjectRef 上添加 classList 属性，而不是在实际元素上。 RefObject 有当前属性此项所在的位置。

for(let j=0; j<names.length; j++) {
  if(pass.match(regexes[j]) ===null || pass1.match(regexes[j])===null) refNames[j].current.classList.add('text-danger');
  else refNames[j].current.classList.add('text-success');
}

访问 JSX 元素的类列表属性

Access ClassList property of JSX Elements

element

reference

reactjs

react-hooks

访问 JSX 元素的类列表 属性

Access ClassList property of JSX Elements

element

reference

reactjs

react-hooks

访问 JSX 元素的类列表属性