Какая альтернатива в React событию onchange в input type="range"?

В html событие onchange в теге срабатывает тогда, когда ползунок передвинут и при этом курсор отжат, в React оно срабатывает только тогда, когда мы сами тащим ползунок, при этом курсор может быть зажат. Мне нужен функционал как в обычном html, есть ли он в React? Спасибо
  • Вопрос задан
  • 79 просмотров
Решения вопроса 1
@Vamba45 Автор вопроса
Сделал хук useDebounce
import { useCallback, useEffect, useRef, useState } from "react"

export default function useDebounce(callback, delay: 500) {
    const timer = useRef();

    const debouncedCallback = useCallback((...args) => {
        if(timer.current) {
            clearTimeout(timer.current);
        }

        timer.current = setTimeout(() => {
            callback(...args)
        }, delay);
    }, [callback, delay])

    return debouncedCallback;
}


Закинул туда setState

const [minPrice, setMinPrice] = useState(5000);
    const debouncedMinPrice = useDebounce(setMinPrice, 500);

    const [maxPrice, setMaxPrice] = useState(15000);
    const debouncedMaxPrice = useDebounce(setMaxPrice, 500);


И повесил на обработчик в input

<RangeSlider defaultMax={15000} defaultMin={500} maxValue={20000} priceGap={2500} title="Диапазон цены" 
                                onMaxChange={debouncedMaxPrice} 
                                onMinChange={debouncedMinPrice}/>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Mike_Ro
@Mike_Ro
Python, JS, WordPress, SEO, Bots, Adversting
<Element
    type="range"
    value={value}
    onChange={handlerChange}
    onMouseUp={handlerEndInteraction}
    onTouchEnd={handlerEndInteraction}
/>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы