reactjs - 在 react 中，如何检测范围 slider 的拇指何时被点击？

Question

<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 中访问拇指呢？

Answer 1

这是一个有趣的问题，直接的答案是它不能直接访问。不过你有几个选择。

使用不同于输入滑块的完全不同的滑块。

在输入上添加 2 个事件 onClick 和 OnInput。
当您单击滑块中除重击之外的任何位置时，您的 onInput 将运行。 onInput 将首先运行，然后是 onClick，以防值发生变化。当您单击 thump 时，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 的值不会触发重新渲染。