Блог

Главная - Вопросы по программированию - В react, как определить, когда нажимается большой палец ползунка диапазона?

В react, как определить, когда нажимается большой палец ползунка диапазона?

#reactjs

Вопрос:

 <input
  ref={left_slider}
  onClick={() => set_neg_clicked(!neg_clicked)}
  step={100}
  type="range"
  min={-1000}
  max={neg_side_max}
  value={neg_side_val}
  onChange={(e) => set_neg_side_val(Math.min(900, e.target.value))}
  className="slider left"
  id="my_neg_range"
  style={{
    margin: 0,
    width: `${neg_side_width}px`,
    position: "absolute",
    left: 0,
    zIndex: 2,
  }}
  ></input>

Мне нужно знать, когда щелкнут большим пальцем. Итак, как можно получить доступ к большому пальцу в React?

Комментарии:

1. Что вы планируете делать на этом мероприятии, когда приедете на это мероприятие?

Ответ №1:

Это интересный вопрос, и прямой ответ на него заключается в том, что он недоступен напрямую. Однако у вас есть несколько вариантов.

  1. Используйте совершенно другой ползунок, отличный от ползунка ввода.
  2. Добавьте 2 события onClick и OnInput на вход. Когда вы нажимаете в любом месте ползунка, кроме удара, ваш ввод будет запущен. Сначала будет запущен onInput, а затем onClick в случае изменения значения. Когда вы просто нажмете на удар, onInput не запустится, сработает только onClick.

Ограничение заключается в том, что когда вы щелкаете и не оставляете мышь, это не полный щелчок.

Вот моя сумасшедшая идея в качестве кода,

 import React, { useState, useRef } from 'react';

export default function App() {
  const [value, setValue] = useState(1);
  let clickRef = useRef(false);
  return (
    <input
      type="range"
      min="1"
      max="100"
      value={value}
      onInput={e => {
        setValue( e.target.value);
        clickRef.current = true;
      }}
      onClick={e => {
        if (!clickRef.current) console.log('Clicked thump');
        clickRef.current = false;
      }}
    />
  );
}

Я использовал useRef для хранения значения, а не как ссылку на элемент. Изменение значения ref не вызовет повторной визуализации.

Метки: , ,