Question

不确定我是否做错了什么，但是当我在useEffect中添加onMouseDown时，单击更改范围值的响应就会变慢。

以下是一些代码：

INSERT INTO worker 
        (FIRST_NAME, LAST_NAME, SALARY, JOINING_DATE, Department) 
        VALUES ('Monika', 'Arora', 100000, (convert(datetime,'14-02-20 09:00:00',5)),'HR')

https://jsfiddle.net/btcpdugz/25/

预期结果：单击范围时应正常工作。实际结果：单击范围时，有时拇指不动或值不变。

Answer 1

您可以删除日志记录useEffect

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"));

单击以更改范围值，使其对反应挂钩的响应变慢

1 个答案: