Проблемы с работой с classList добавить и удалить в реакции

0 tidelake [2019-01-09 00:02:00]

В моем компоненте у меня есть useEffect добавляющая прослушиватели событий в функцию диапазона, чтобы изменить цвет ползунка. Я могу получить только розовый, чтобы работать повсюду, и синий на неправильном конце слайдера.

В console.log() я вижу все перечисленные классы, но, кажется, работает только розовый. Спасибо.

составная часть

  const range = (r) => {
    // move gradient
    r.addEventListener('input', () => {
      // Change slide thumb color on way up
      if (r.value > r.max * 0.20) {
        r.classList.add('pink')
      }
      if (r.value > r.max * 0.40) {
        r.classList.add('purple')
      }
      if (r.value > r.max * 0.60) {
        r.classList.add('ltpurple')
      }
      if (r.value > r.max * 0.80) {
        r.classList.add('blue')
      }

      // Change slide thumb color on way down
      if (r.value < r.max * 0.20) {
        r.classList.remove('pink')
      }
      if (r.value < r.max * 0.40) {
        r.classList.remove('purple')
      }
      if (r.value < r.max * 0.60) {
        r.classList.remove('ltpurple')
      }
      if (r.value < r.max * 0.80) {
        r.classList.remove('blue')
      }
      // window.requestAnimationFrame(r)
      console.log(r.classList)
    })
  }

  useEffect(() => {
    Array.from(document.getElementsByClassName('range')).map(r => range(r))
  })

JSX

  <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>

reactjs react-hooks

Оригинал вопроса (на английском)

1 ответ

1 Решение Yongzhi [2019-01-09 00:43:00]

не рекомендуется напрямую манипулировать домом с помощью React. Вы можете поместить входное значение в состояние компонента 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>
)

реализовать getClassNameFnc как функцию, которая возвращает имя класса, например

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

Оригинал ответа (на английском)