web-dev-qa-db-fra.com

Actions du livre de contes - comment appellent-elles exactement?

Je suis un peu nouveau à React et j'essaie de faire un mécanisme de balayage de carte.

J'utilise cette bibliothèque:

https://www.npmjs.com/package/react-swipe-card

J'ai essentiellement un composant de démonstration créé:

import React, { Component } from 'react'
import Cards, { Card } from 'react-swipe-card';
import { action } from '@storybook/addon-actions';
import addons, { mockChannel } from '@storybook/addons';

addons.setChannel(mockChannel());

const data = ['Alexandre', 'Thomas', 'Lucien']

const Wrapper = () => {
  return (
      <Cards onEnd={action('end')} className='master-root'>
        {data.map(item => 
          <Card
          key={item}
          onSwipeRight={action('swipe left')}
          onSwipeLeft={action('swipe left')}
          >
            <h2>{item}</h2>
          </Card>
        )}
      </Cards>
  )
}

export default Wrapper;

Cependant, je ne connais pas très bien les Storybooks - je l'ai lu et cela n'a pas vraiment de sens pour moi.

Par exemple, une fois toutes les cartes terminées, j'aimerais les mélanger et les afficher à nouveau.

En ce moment, la seule "action" qui est exécutée est "end", quoi que cela fasse:

onEnd={action('end')

Quelle est cette fin d'action exactement? Comment repeupler les cartes à la fin?

Désolé si c'est une question de base, honnêtement, je ne l'aurais pas posée si je n'avais pas essayé de comprendre les Storybooks depuis quelques jours.

javascriptreactjsstorybook
8
Cecil Rodriguez

D'accord, comme Jack l'aurait dit, allons-y par parties. Tout d'abord:

Je voudrais une explication du fonctionnement des actions du livre de contes

storybook-actions est un addon à la plateforme de Storybook. Les actions vous fournissent un mécanisme qui enregistre les interactions et les données des utilisateurs au fur et à mesure qu'ils transitent par vos composants dans l'interface utilisateur du Storybook. action() est en fait un high-order function qui renvoie une autre fonction similaire à console.log(), la seule différence ici est qu'en plus de consigner l'activité de l'utilisateur et d'effectuer d'autres opérations, le nom du l'action (fin, glisser vers la gauche, ...) sera également rendue sur le panneau d'action de votre livre de contes.

Les fonctions de gestionnaire d'événements créées par action() sont utiles pour remplacer les fonctions de gestionnaire d'événements réelles que vous transmettez à vos composants. D'autres fois, vous avez réellement besoin du comportement de gestion des événements pour s'exécuter. Par exemple, vous avez un champ de formulaire contrôlé qui conserve son propre état et vous voulez voir ce qui se passe lorsque l'état change

Voir ceci article à propos de actions pour plus d'informations

Seconde:

Une réponse parfaite expliquerait comment faire répéter les cartes après qu'un utilisateur a fini de parcourir une pile

Cela n'a en fait rien à voir avec les actions ou même avec le livre de contes, cette logique est implémentée par le package react-swipe-card, Et ici j'avoue mon incompétence, j'ai même essayé de passer par la source, mais c'est tellement désordonné il est presque impossible de comprendre exactement ce qui se passe, la logique que vous recherchez est juste un carousel, qui vérifie si l'élément suivant est null ou undefined et la casse vrai recommencez tout. Ou si l'élément précédent est null ou undefined et que la casse true passe au dernier élément. Je vous conseille de trouver une autre bibliothèque plus fiable comme react-swipeable-views

1
Dupocas

Vous devez écrire les histoires! https://www.learnstorybook.com/react/en/simple-component/

Bien que, si vous ne souhaitez pas utiliser le livre d'histoires et faire fonctionner votre carte, appelez simplement les fonctions spécifiques onSwipeLeft, onSwipeRight

0
Luchux

En fait, action('end') n'est qu'un gestionnaire d'actions (ainsi que action('swipe left') ou action('swipe right')) qui est appelé lors d'un événement spécifique (onEnd). Jetez un œil à https://alexandre-garrec.github.io/react-swipe-card/ et au ACTION LOGGER en pied de page.

La documentation (très pauvre) ne donne aucune idée de ce que fait exactement onEnd dans cette bibliothèque, mais, comme je peux le voir dans le code source, cette fonction (si elle est passée en tant qu'accessoire) est appelée lors du retrait d'une carte if counter de cartes retirées est égal au nombre total de cartes ( https://github.com/alexandre-garrec/react-swipe-card/blob/master/src/Cards.js , ligne 23). Je pense que cela est destiné à faire qc lorsque toutes les cartes ont été glissées, par exemple montrer une alerte ou autre chose.

Si je vous ai bien compris, aucune méthode de réinitialisation n'est disponible (jusqu'à présent) pour ce composant. Toutes les fonctionnalités disponibles sont fournies sous forme de démonstration ici: https://github.com/alexandre-garrec/react-swipe-card/blob/master/stories/index.js

Dans une application réelle (pas des histoires), vous pouvez toujours essayer de mettre les données utilisées pour rendre les cartes à l'état du composant et les réinitialiser quand vous le souhaitez (par exemple, appeler sa réinitialisation via onClick d'un bouton).

0
Arfeo