Reactjs 访问JSX元素的ClassList属性

我有以下问题：我想要一个类似“密码状态栏”的东西，告诉用户 密码已经满足并且必须满足的条件，但是当我尝试访问标签的类列表时，我得到错误“无法读取未定义的属性add”，当我尝试console.log类列表时，我也得到未定义。我正在标签中使用参照，因此可以访问属性。我还尝试使用一个状态变量，但是当我尝试读取refs时，我总是得到null。首先，我尝试只在另一个返回标签的组件的方法中创建该组件，但在那里我每次都未定义该组件

（password和password1是来自另一个组件的输入（它是用于重置密码的密码，因此您必须确认新密码），出于测试目的，我将pass和pass1设置为一个简单的字符串，它应该是password和password1））

（我还使用react引导程序进行样式设置（如果相关）） 我想知道如何访问react元素的classList属性，请向我解释我犯了哪些错误

代码：

import React，{useffect，useState}来自“React”；
从“react bootstrap”导入{Input，Form，Button}；
导入'bootstrap/dist/css/bootstrap.min.css'；
函数密码状态（{password}，{password1}）{
//const[output，setOutput]=useState（“”）；
const names=[`[A-Z]`、`[A-Z]`、`[0-9]`、`>10&您正在ObjectRef而不是实际元素上添加classList属性。
重新对象具有此项所在的当前属性

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

用于（让j=0；jRather来解决这个问题，我建议您放弃使用refs和
classList
的想法，而是采取更具反应性的方法？您希望对每个键控进行检查，因此运行一个响应该事件的函数，每次只计算类列表，而不是尝试从
类中加减列出
。好的，谢谢。我如何实现这一点，它看起来如何正确？我如何访问这些值​​当我编写函数时的几个元素（例如，单击应查询值的按钮​​根据输入字段和值，然后输出错误消息或进一步处理数据）。我真的不知道如果没有refs（我是新手），这应该如何工作，因为您无法访问元素及其值​​没有refs（至少我不知道），但是我如何才能将类添加到此元素中？如上面的示例所示。您仍然在使用classList.add（），但是在
current
属性上而不是在ref上。我很愚蠢，抱歉。感谢您的帮助：D
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');
}