ReactJs 中的长按事件

Question

I have a favorites page where when I single click a button it will redirect to another page but when I hold it, it will have a pop up to remove from favorites how can I achieve that?我有一个收藏夹页面，当我单击一个按钮时，它会重定向到另一个页面，但是当我按住它时，它会弹出一个从收藏夹中删除的页面，我该如何实现？

This is my favorite page这是我最喜欢的页面

const FavoritePage = () => {

  const getArray = JSON.parse(
    localStorage.getItem(favoriteProductsStorageKey) || []
  )

  return (
    <>
      <Grid container spacing={3} className={classes.heading}>
        <Grid item xs={2}>
          <Box pt={0.5}>
            <Link to="#">
              <ArrowBackIcon className={classes.backSize} />
            </Link>
          </Box>
        </Grid>
        <Grid item xs={10}>
          <Typography variant="h6" className={classes.header}>
            My Favorites
          </Typography>
        </Grid>
      </Grid>
      <Box pt={1}>
        {getArray.length > 0 ? (
          <div className={classes.root}>
            {getArray.map((product) => (
              <div className="ProductCard" key={product._id}>
                <div>
                  <Link to="product">
                    <img
                      className="ProductImage"
                      src={product.imagePrimary}
                      alt={product.name}
                    />
                  </Link>
                </div>
                <div className="ProductCardDetails">
                  <div className="NameAndPrice">
                    <div className="ProductName">{product.name}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <h4 className={classes.top}>
            Add your favorite products here by tapping the{" "}
            <span className={classes.icon}>♥</span> symbol on the product.
          </h4>
        )}
      </Box>
    </>
  )
}

export default FavoritePage

this is the imported function coming from my helpers.js to remove the favorites from local storage这是来自我的 helpers.js 的导入函数，用于从本地存储中删除收藏夹

function removeFavorite(product) {
const newFavoriteProducts = favorites.filter(
  (iteratedProduct) => iteratedProduct._id !== product._id
)

setFavorites(newFavoriteProducts)
setToLocalStorage(favoriteProductsStorageKey, newFavoriteProducts)

}

I'm trying to find a solution on how to implement the long press to a single product to be removed from the favorites in the local storage.我试图找到一个解决方案，如何对单个产品实施长按，以从本地存储的收藏夹中删除。

Answer 1

As far as I am concerned There is no pure html or javascript way to accomplish this.就我而言，没有纯 html 或 javascript 方法来实现这一点。 But there is a trick in javascript you use the onmousedown listener and onmouseup listener .但是在 javascript 中有一个技巧，你可以使用onmousedown listener和onmouseup listener 。 Here is a code to do so:这是一个代码：

 var timeout; var clicked = function (){ timeout = window.setTimeout(function(){ //Do work here alert('You clicked the button for 1300'); },1300)//Change time according to need but most commonly used time is 1300 milliseconds. } var unclicked = function (){ clearTimeout(timeout); }

 span{ font-size: 130%; border: 2px solid blue; }

 <html> <head> <meta charset="utf-8"> </head> <body> <div><span onmousedown="clicked();" onmouseup="unclicked();">Click me long!</span> To see the magic.</div> </body> </html>

What this code does is very simple it just sets timeout and if it is completed it executes the code.这段代码所做的很简单，它只是设置超时，如果完成，它就会执行代码。

Answer 2

Implementation using react hookscodesandbox.io使用 react hooks代码和 box.io 实现

Full code:完整代码：

import { useState, useEffect } from "react";

const LongPressButton = (props) => {
  const [waitingForLongPress, setWaitingForLongPress] = useState(false);
  const [timeoutId, setTimeoutId] = useState(null);

  useEffect(() => {
    if (timeoutId) {
      clearTimeout(timeoutId);
    }

    if (waitingForLongPress) {
      setTimeoutId(
        setTimeout(() => {
          props.onLongPress();
          setWaitingForLongPress(false);
        }, props.longPressDelayMS)
      );
    }
  }, [waitingForLongPress]);

  return (
    <button
      onMouseDown={() => setWaitingForLongPress(true)}
      onMouseUp={() => setWaitingForLongPress(false)}
      onClick={props.onClick}
    >
      {props.label}
    </button>
  );
};

export default function App() {
  const [longPressCount, setLongPressCount] = useState(0);
  const [clickCount, setClickCount] = useState(0);

  return (
    <div className="App">
      <div>Times click: {clickCount}</div>
      <div>Times long-pressed: {longPressCount}</div>
      <LongPressButton
        label="Press me"
        onLongPress={() => {
          setLongPressCount(longPressCount + 1);
        }}
        onClick={() => {
          setClickCount(clickCount + 1);
        }}
        longPressDelayMS={1000}
      />
    </div>
  );
}

ReactJs 中的长按事件

问题描述

2 个解决方案

解决方案1
0 2021-07-21 09:19:14

解决方案2
0 2021-07-21 15:09:14

ReactJs 中的长按事件

问题描述

2 个解决方案

解决方案1 0 2021-07-21 09:19:14

解决方案2 0 2021-07-21 15:09:14

解决方案1
0 2021-07-21 09:19:14

解决方案2
0 2021-07-21 15:09:14