web-dev-qa-db-ja.com

ストーリーブックアクション-彼らは正確に何を呼んでいますか？

私はReactの初心者で、カードスワイプメカニズムを実行しようとしています。

私はこのライブラリを使用しています：

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

私は基本的にデモコンポーネントを作成しています：

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;

しかし、私はストーリーブックに精通していません-私はそれについて読んでいて、それは私には全く意味がありません。

たとえば、すべてのカードを通過した後、それらをシャッフルして再度表示したいと思います。

現在、実行される唯一の「アクション」は「終了」です。

onEnd={action('end')

このアクションは正確に何を呼び止めていますか？どうすれば、カードを最後に再投入できますか？

これが基本的な質問である場合は申し訳ありませんが、ストーリーブックを数日間最初に理解していなかったとしたら、正直に尋ねなかったでしょう。

javascriptreactjsstorybook
8
Cecil Rodriguez

さて、ジャックが言ったように、部品で行きましょう。まず第一に：

ストーリーブックのアクションの仕組みについて説明したい

_storybook-actions_ はStorybookのプラットフォームへのアドオンです。アクションは、StorybookのUIのコンポーネントを通過するユーザーの操作とデータをログに記録するメカニズムを提供します。 action()は実際には_high-order function_であり、console.log()と同様の別の関数を返します。ここでの唯一の違いは、ユーザーのアクティビティをログに記録して他の操作を実行する以外に、アクションの名前です。 （終了、左にスワイプ、...）は、ストーリーブックのアクションパネルにもレンダリングされます。

action()が作成するイベントハンドラー関数は、コンポーネントに渡す実際のイベントハンドラー関数の代わりとして役立ちます。また、実際には、イベント処理動作を実行する必要がある場合もあります。たとえば、独自の状態を維持する制御されたフォームフィールドがあり、状態が変化するとどうなるかを確認したいとします。

詳細はこちら 記事 詳細についてはactionsについて

第二：

完全な答えは、ユーザーがスタックを通過し終えた後にカードを繰り返す方法を説明します

これは実際にはアクションやストーリーブックとは何の関係もありません。このロジックは_react-swipe-card_パッケージによって実装されており、ここでは無能を認めています。ソースを調べてみましたが、何が起こっているのか正確に理解することはほとんど不可能です。あなたが探しているロジックは単なるcarouselであり、次の要素がnullまたはundefinedであり、かつtrueであるかどうかをチェックします最初からやり直してください。または、前の要素がnullまたはundefinedで、trueの場合、最後の要素に移動します。 _react-swipeable-views_のような最も信頼性の高い他のライブラリを見つけることをお勧めします

1
Dupocas

ストーリーを書く必要があります！ https://www.learnstorybook.com/react/en/simple-component/

ただし、ストーリーブックを使用せずにカードを機能させるには、特定の関数onSwipeLeft、onSwipeRightを呼び出します。

0
Luchux

実際、action('end')は、特定のイベント（onEnd）で呼び出される単なるアクションハンドラ（およびaction('swipe left')またはaction('swipe right')）です。 https://alexandre-garrec.github.io/react-swipe-card/ とフッターのACTION LOGGERをご覧ください。

ドキュメント（非常に貧弱）は、このライブラリで正確にonEndが何をするかはわかりませんが、ソースコードで確認できるように、この関数（propとして渡された場合）は、カウンターが削除されたカードの数は、カードの総数（ https://github.com/alexandre-garrec/react-swipe-card/blob/master/src/Cards.js 、23行目）と等しくなります。これは、すべてのカードがスワイプされたときにsthを実行することを意図していると思います。アラートなどを表示します。

私があなたを正しく理解している場合、このコンポーネントに対して（今のところ）リセット方法はありません。利用可能なすべての機能は、こちらのデモとして提供されています。 https://github.com/alexandre-garrec/react-swipe-card/blob/master/stories/index.js

実際のアプリケーション（ストーリーではありません）では、カードをレンダリングするために使用されるデータをコンポーネントの状態にして、いつでもリセットできます（たとえば、ボタンのonClickを介してリセットを呼び出します）。

0
Arfeo