Reactjs 单击以更改范围值在响应挂钩上的响应性变差

我不确定我是否做错了什么，但当我使用useEffect添加onMouseDown时，单击更改范围值的响应会变差

下面是一些代码：

function Slider() {
  const min = 1;
  const max = 100;
    const [value, setValue] = React.useState(0);
  const [dragStarted, setDragStarted] = React.useState(false);
  const [dragging, setDragging] = React.useState(false);
  const percentage = (value - min) / (max - min);

  React.useEffect(() => {
    if (dragStarted && !dragging) {
      console.log('dragging');
      setDragging(true);
    }
  }, [percentage, dragStarted]);


    return (
    <input
      value={value}
      min={min}
      max={max}
      step="1"
      onChange={({ target }) => setValue(target.value)}
      onMouseDown={(e) => {
        setDragStarted(true);
      }}
      onMouseUp={(e) => {
        setDragStarted(false);
        setDragging(false);
      }}
      type="range" 
    ></input>
  );
}

ReactDOM.render(<Slider />, document.querySelector("#app"));

函数滑块（）{
常数min=1；
常数max=100；
const[value，setValue]=React.useState（0）；
const[dragStarted，setDragStarted]=React.useState（false）；
const[draging，setdraging]=React.useState（false）；
常数百分比=（值-最小值）/（最大值-最小值）；
React.useffect（（）=>{
如果（拖动开始&&！拖动）{
log（'drawing'）；
设置拖动（true）；
}
}，[百分比，拖动开始]；
返回(
setValue（target.value）}
onMouseDown={（e）=>{
setDragStarted（真）；
}}
onMouseUp={（e）=>{
setDragStarted（假）；
设置拖动（假）；
}}
type=“范围”
>
);
}
ReactDOM.render（，document.querySelector（“#app”）；

预期结果：单击范围时应正常工作。

---

实际结果：单击范围时，有时拇指不移动或值不改变。

您可以删除记录效果

function TodoApp() {
  const min = 1;
  const max = 100;
  const [value, setValue] = React.useState(0);
  const [dragStarted, setDragStarted] = React.useState(false);
  const [dragging, setDragging] = React.useState(false);      

  React.useEffect(() => {
     console.log(dragStarted, dragging);
  }, [dragStarted, dragging]);

  React.useEffect(() => {
    if (dragStarted && !dragging) {
      setDragging(true);
    }
  }, [value]);


    return (
    <input
      value={value}
      min={min}
      max={max}
      step="1"
      onChange={({ target }) => setValue(target.value)}
      onMouseDown={(e) => {
        setDragStarted(true);
      }}
      onMouseUp={(e) => {
        setDragStarted(false);
        setDragging(false);
      }}
      type="range" 
    ></input>
  );
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"));

函数TodoApp（）{ 常数min=1； 常数max=100； const[value，setValue]=React.useState（0）； const[dragStarted，setDragStarted]=React.useState（false）； const[draging，setdraging]=React.useState（false）； React.useffect（（）=>{ console.log（拖动开始，拖动）； }，[dragStarted，Draging]）； React.useffect（（）=>{ 如果（拖动开始&&！拖动）{ 设置拖动（true）； } }，[价值]； 返回( setValue（target.value）} onMouseDown={（e）=>{ setDragStarted（真）； }} onMouseUp={（e）=>{ setDragStarted（假）； 设置拖动（假）； }} type=“范围” > ); } ReactDOM.render（，document.querySelector（“#app”）；

---

我注意到，当我在useEffect中删除dragStarted时，它再次变得更加灵敏。。。但是React抱怨“React Hook useEffect缺少依赖项：'dragStarted'。包括它或删除依赖项数组React hooks/deps”