web-dev-qa-db-fra.com

réagir long événement de presse

Existe-t-il un moyen d'ajouter un appui long event dans l'application react-web ?

J'ai une liste d'adresses. En appuyant longuement sur n'importe quelle adresse, je veux déclencher un événement pour supprimer cette adresse suivi d'une boîte de confirmation.

reactjsjavascript-eventscreate-react-appreact-web
5
Binit Ghetiya

Vous pouvez utiliser les événements MouseDown, MouseUp, TouchStart, TouchEnd pour contrôler des minuteries pouvant jouer le rôle d’un événement de longue presse. Découvrez le code ci-dessous

class App extends Component {
  constructor() {
    super()
    this.handleButtonPress = this.handleButtonPress.bind(this)
    this.handleButtonRelease = this.handleButtonRelease.bind(this)
  }
  handleButtonPress () {
    this.buttonPressTimer = setTimeout(() => alert('long press activated'), 1500);
  }

  handleButtonRelease () {
    clearTimeout(this.buttonPressTimer);
  }

  render() {
    return (
      <div 
          onTouchStart={this.handleButtonPress} 
          onTouchEnd={this.handleButtonRelease} 
          onMouseDown={this.handleButtonPress} 
          onMouseUp={this.handleButtonRelease} 
          onMouseLeave={this.handleButtonRelease}>
        Button
      </div>
    );
  }
}
18
sudo bangbang

Avec les hooks dans react 16.8, vous pouvez réécrire la classe avec des fonctions et des hooks.

import { useState, useEffect } from 'react';

export default function useLongPress(callback = () => {}, ms = 300) {
  const [startLogPress, setStartLongPress] = useState(false);

  useEffect(() => {
    let timerId;
    if (startLogPress) {
      timerId = setTimeout(callback, ms);
    } else {
      clearTimeout(timerId);
    }

    return () => {
      clearTimeout(timerId);
    };
  }, [startLogPress]);

  return {
    onMouseDown: () => setStartLongPress(true),
    onMouseUp: () => setStartLongPress(false),
    onMouseLeave: () => setStartLongPress(false),
    onTouchStart: () => setStartLongPress(true),
    onTouchEnd: () => setStartLongPress(false),
  };
}

import useLongPress from './useLongPress';

function MyComponent (props) {
  const backspaceLongPress = useLongPress(props.longPressBackspaceCallback, 500);

  return (
    <Page>
      <Button {...backspaceLongPress}>
        Click me
      </Button>
    </Page>
  );
};
2
David