如何在反应网络中处理长按事件

Posted 2023-02-27

【中文标题】如何在反应网络中处理长按事件

【英文标题】：How handle long press event in react web

【发布时间】：2019-12-02 09:48:15

【问题描述】：

大家！我使用反应和材料 ui 库。我想分别处理点击事件和长按事件。我认为与异步设置状态有关的问题，但目前我不知道如何处理此事件

const [isCommandHandled, setIsCommandHandled] = React.useState(null);
const handleButtonPress = function (e) 
    setIsCommandHandled(false);
    console.log('ON_MOUSE_DOWN ' + isCommandHandled); // here value null
    buttonPressTimer = setTimeout(handleLongPress, 1500, e);
  .bind(this);

  const handleLongPress = (e) => 
    if (!isCommandHandled) 
      setIsCommandHandled(true);
      console.log('TIMER_IS_EXECUTED' + isCommandHandled); //Here value false or null
      // some other logic for long press event
    
    clearTimeout(buttonPressTimer);
  ;

  const handleButtonRelease = function (e) 
    if (!isCommandHandled) //isCommandHandled isn't updated here, as a result logic is executed always
       // got regular click, not long press
       // specific logic
      setIsCommandHandled(true);
    
    clearTimeout(buttonPressTimer);
  ;

<IconButton 
             onMouseDown=(e) => handleButtonPress(e)
             onMouseUp=(e) => handleButtonRelease(e)
          >
    ```

【参考方案1】：

您可以将 setState 与回调一起使用，并将设置的超时 ID 放入 state：

 setIsCommandHandled((prevState)=> 
        console.log("TIMER_IS_EXECUTED" + isCommandHandled); //Here value false or null
        return true; );

工作示例： https://codesandbox.io/s/material-demo-gc0le

【讨论】：

感谢您抽出宝贵时间。但我认为有一些问题。我想单独捕捉事件。我的意思是，如果我们得到简单的点击，我们不会为长按触发逻辑，反之亦然。 ``` const handleButtonRelease = function(e) console.log("handleLongPress", isCommandHandled); ``` 如果我添加了上一行，我会看到在鼠标向上处理程序中 isCommandHandled 变量始终为 false。

我编辑了示例：codesandbox.io/s/material-demo-gc0le 查看 LONG PRESS TIMER_IS_EXECUTED 和 SINGLE PRESS