Reactjs 在react中使用类列表添加和删除时出现问题

在我的组件中，我使用

useffect

钩子将事件侦听器添加到range函数中，以更改滑块的颜色。我只能让粉红色的工作在所有的地方，蓝色的滑块在错误的一端

在console.log（）中，我看到了列出的所有类，但似乎只有粉红色的类起作用。多谢各位

成分

const range=（r）=>{
//移动梯度
r、 addEventListener（'输入'，（）=>{
//向上移动时更改幻灯片的拇指颜色
如果（r.value>r.max*0.20）{
r、 类列表。添加（'pink'）
}
如果（r.value>r.max*0.40）{
r、 类列表。添加（'purple'）
}
如果（r.value>r.max*0.60）{
r、 classList.add（'ltpurple'）
}
如果（r.value>r.max*0.80）{
r、 类列表。添加（'blue'）
}
//在下降过程中更改幻灯片的拇指颜色
如果（r.值{
Array.from（document.getElementsByClassName（'range'））.map（r=>range（r））
})

JSX

梳毛
护理和健康：头发、耳朵、嘴巴、鼻子、嘴唇、脸、手、指甲、脚、脚趾

整洁：头发、指甲、耳朵、脸、手

卫生用品
卫生教育和意识。常规和其他日常实践

展示适当的卫生习惯

不建议直接使用React操作dom。您可以将输入值置于ur组件状态，该类可以是一个输出，具体取决于状态

const [v, setV] = useState(0)

return (
  <div className="row">
        <h3>Grooming</h3>
        <p>Care and health: hair, ears, mouth, nose, lips, face, hands, nails, feet, toes.</p>
        <input type="range" value={v} onChange={e => setV(e.target.value)} className={getClassNameFnc(v, 0, 100)}
          min={0} max={100} name="grooming" onBlur={handleBlur} />
        <p>Well groomed: hair, nails, ears, face, hands.</p>
      </div>
)

  <div className="row">
        <h3>Grooming</h3>
        <p>Care and health: hair, ears, mouth, nose, lips, face, hands, nails, feet, toes.</p>
        <input type="range" className="range blue"
          min={0} max={100} name="grooming" onBlur={handleBlur} />
        <p>Well groomed: hair, nails, ears, face, hands.</p>
      </div>
      <div className="row">
        <h3>Hygiene</h3>
        <p>Hygiene education and awareness. Routine and other daily practices.</p>
        <input type="range" className="range blue" onBlur={handleBlur}
          min={0} max={100} name="hygiene" />
        <p>Demonstrates appropriate hygiene practices.</p>
      </div>

const [v, setV] = useState(0)

return (
  <div className="row">
        <h3>Grooming</h3>
        <p>Care and health: hair, ears, mouth, nose, lips, face, hands, nails, feet, toes.</p>
        <input type="range" value={v} onChange={e => setV(e.target.value)} className={getClassNameFnc(v, 0, 100)}
          min={0} max={100} name="grooming" onBlur={handleBlur} />
        <p>Well groomed: hair, nails, ears, face, hands.</p>
      </div>
)

function getClassNameFnc(v, min, max) {
  if(v > max * 0.20) {
    return 'pink'
  }
  ...
}