如何處理反應中的長按事件 web

Question

每個人。 我使用反應和材料 ui 庫。 我想分別處理點擊事件和長按事件，我認為問題與異步設置 state 有關，但目前，我不知道如何處理這些事件

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)}
          >
    ```

Answer 1

您可以將 setState 與回調一起使用，並將設置的超時 ID 置於狀態：

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

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

Answer 2

這就是我處理長按的方式：

//import Hooks
import { useState, useEffect } from "react";

const Component = () => {
  //pressState
  const [pressed, setPressed] = useState();

  //handleLongPress
  useEffect(() => {
    const timer = pressed
      ? setTimeout(() => {
          console.log(pressed, "got pressed!");
        }, 1300)
      : null;
    return () => clearTimeout(timer);
  }, [pressed]);

  //pressedElement
  return (
    <div
      onMouseDown={(e) => setPressed(e.target)}
      onMouseUp={() => setPressed()}
      style={{ backgroundColor: "lightgreen" }}
    >
      Press me
    </div>
  );
};

export default Component;

在這里測試： https://codesandbox.io/s/bold-bose-7vx3qg