Reactjs 如何检测鼠标单击是长还是短？

我需要检测用户是否长时间按住鼠标或快速单击按钮

这是我的测试代码。mTimer值在onMouseDown（）中设置，但在mTimeout（）中计算为false。我做错了什么

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [mouseInfo, setMouseInfo] = useState({
    mTimer: null,
    action: ""
  });

  const mTimeout = () => {
    if (mouseInfo && mouseInfo.mTimer) {
      setMouseInfo({
        mTimer: null,
        action: "More than 1 sec passed"
      });
    }
  };

  const onMouseDown = (ev) => {
    const timeoutId = setTimeout(mTimeout, 1000);
    console.log(typeof timeoutId, Boolean(timeoutId));
    setMouseInfo({
      mTimer: timeoutId,
      action: "mousedown"
    });
  };

  const onMouseUp = (ev) => {
    if (mouseInfo.mTimer) {
      clearTimeout(mouseInfo.mTimer);
      setMouseInfo({
        mTimer: null,
        action: "Mouseup before 1 sec"
      });
    } else {
      setMouseInfo({
        mTimer: null,
        action: "Mouseup after 1 sec"
      });
    }
  };

  return (
    <div className="App">
      <button onMouseDown={onMouseDown} onMouseUp={onMouseUp}>
        Click my slowly
      </button>
      <p>{mouseInfo.action}</p>
    </div>
  );
}

import React，{useState}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[mouseInfo，setMouseInfo]=useState({
mTimer:null，
行动：“”
});
常量mTimeout=（）=>{
if（mouseInfo&&mouseInfo.mTimer）{
setMouseInfo({
mTimer:null，
操作：“超过1秒”
});
}
};
const onMouseDown=（ev）=>{
const timeoutId=setTimeout（mTimeout，1000）；
log（timeoutId的类型，布尔值（timeoutId））；
setMouseInfo({
mTimer:timeoutId，
行动：“鼠标下”
});
};
const onMouseUp=（ev）=>{
if（mouseInfo.mTimer）{
clearTimeout（mouseInfo.mTimer）；
setMouseInfo({
mTimer:null，
动作：“1秒前鼠标悬停”
});
}否则{
setMouseInfo({
mTimer:null，
动作：“1秒后鼠标悬停”
});
}
};
返回(
慢慢地按我的按钮
{mouseInfo.action}

);
}

您可以试试这个：

问题 这不起作用，因为

setMouseInfo

不会立即更改状态

const onMouseDown=（ev）=>{
const timeoutId=setTimeout（mTimeout，1000）；
log（timeoutId的类型，布尔值（timeoutId））；
setMouseInfo({
mTimer:timeoutId，
行动：“鼠标下”
});
};

因此，

mouseInfo.mTimer

即使在一秒钟之后也不会被设置，因此它可能是

null

const mTimeout=（）=>{
控制台日志（“mTimeout”）；
if（mouseInfo&&mouseInfo.mTimer）{
setMouseInfo({
mTimer:null，
操作：“超过1秒”
});
} 
};

解决方案 只需删除或注释检查

mouseInfo

和

mouseInfo.mTimer

的if语句即可

const mTimeout=（）=>{
控制台日志（“mTimeout”）；
//if（mouseInfo&&mouseInfo.mTimer）{
setMouseInfo({
mTimer:null，
操作：“超过1秒”
})
// }
};

---

“这不起作用，因为setMouseInfo不会立即更改状态。”-按钮下方页面上的文本几乎立即更改为“mousedown”，这意味着状态在1秒超时之前很久就会更改。问题是mTimeout（）看不到更新的状态，只看到旧的状态。是的，您可以通过不依赖timeout方法中的状态来修复此示例，但是如果在timeout方法中需要正确的状态，您如何访问它呢？问题是mTimeout（）看不到更新的状态，只看到旧的状态。您可以通过不依赖timeout方法中的状态来修复此示例，但是如果在timeout方法中需要正确的状态，您如何访问它呢？