Javascript 故事书中的动作——它们到底叫什么？

我对这种反应有些陌生，我正在尝试一种刷卡机制

我正在使用这个库：

我基本上创建了一个演示组件：

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;

这个动作到底是什么？我该如何重新填充这些卡片

---

很抱歉，如果这是一个基本问题，老实说，如果我没有在几天内尝试找出故事书，我不会问这个问题。

你需要写故事！

尽管如此，如果您不想使用故事书并使您的卡正常工作，只需调用特定的函数onswipleft，onswipright

实际上

action（'end'）

只是一个动作处理程序（以及在特定事件（

oned

）上调用的

action（'swipe left'）

或

action（'swipe right'）

）。查看并查看页脚中的

操作记录器

文档（非常差）不知道

onEnd

在这个库中到底做了什么，但是，正如我在源代码中看到的，如果移除的卡的计数器等于总卡数（，第23行），则在移除卡时调用此函数（如果作为道具传递）。我认为这是为了在所有卡都被刷卡时做某事，例如显示一些警报或其他什么

如果我理解正确，则该组件目前没有可用的重置方法。所有可用的功能都作为演示在此处提供：

---

在实际应用程序（而不是故事）中，您仍然可以尝试将用于渲染卡的数据置于组件状态，并随时重置它（例如，通过单击某个按钮的

调用重置）。
好的，正如Jack所说的，让我们分部分进行。首先:

我想解释一下故事书中的动作是如何工作的

是Storybook平台的附加组件。操作为您提供了一种机制，在用户交互和数据流经故事书UI中的组件时，记录用户交互和数据
action（）
实际上是一个
高阶函数
，它返回另一个类似于
console.log（）
的函数，这里唯一的区别是除了记录用户的活动和执行其他操作外，动作的名称（结束，向左滑动，…）也将呈现在故事书的操作面板上

action（）
创建的事件处理程序函数非常有用，可以替代传递给组件的实际事件处理程序函数。其他时候，实际上需要运行事件处理行为。例如，您有一个维护其自身状态的受控表单字段，您希望看到在状态更改时发生的情况

有关更多信息，请参见关于
操作的信息

第二：

一个完美的答案将解释如何在用户完成堆叠后使卡片重复

这实际上与动作甚至故事书没有任何关系，这一逻辑是通过
react swipe card
软件包实现的，在这里我承认我的无能，我甚至试图查看源代码，但太混乱了，几乎不可能准确理解到底发生了什么，您正在寻找的逻辑只是一个
旋转木马
，它检查下一个元素是
null
还是
未定义
，并且case true从头开始。或者，如果前一个元素为
null
或
未定义
且大小写为true，则转到最后一个元素。我建议您找到其他最可靠的库，如
react swipeable views
您了解为什么需要storybook吗？@dehandcroos-我不知道，尽管我现在正在阅读解释。如果这样做，请暂时将storybook从您的项目中完全删除。因为你是新手，这会让你困惑。Storybooks是UI管理工具，您不需要将其发送给客户。这是为了让你的团队与你应该遵循的UI风格保持同步。
onEnd={action('end')