Action

Die Action umschließt einen Button und gibt Feedback bei asynchronen Aktionen.GitHubMarkdown

Actions abbrechen

Wenn eine Action abgebrochen werden soll, ohne einen Fehler auszulösen, kann die Funktion abortAction aus dem Action-Modul verwendet werden. Diese Funktion wirft einen speziellen Fehler, der von der Action-Component erkannt wird. Dadurch kann die Action sauber abgebrochen werden, ohne dass unerwünschte Fehlermeldungen oder Seiteneffekte auftreten.

Alle nachfolgenden Funktionen in der Action-Execution-Logik, die nach dem Aufruf von abortAction definiert sind, werden nicht mehr ausgeführt. Das bedeutet, dass der gesamte Ablauf der Action sofort gestoppt wird, sobald abortAction aufgerufen wird.

Umschließende Actions bei einer Verschachtelung von Actions werden ebenfalls abgebrochen, wenn abortAction in einer inneren Action aufgerufen wird.

import { sleep } from "@/content/04-components/actions/action/examples/lib";
import {
  abortAction,
  Action,
  Button,
} from "@mittwald/flow-react-components";

<Action
  onAction={() => {
    console.log("Outer action");
  }}
>
  <Action
    onAction={async () => {
      await sleep();
      console.log("Inner action");
      abortAction();
    }}
  >
    <Button>Start action</Button>
  </Action>
</Action>

Properties

PropertyTypeDescription
actionModel
ActionModel
closeOverlay
keyof FlowComponentPropsTypesOverlayControllerCloseOverlayOptions
openOverlay
keyof FlowComponentPropsTypesOverlayController
toggleOverlay
keyof FlowComponentPropsTypesOverlayController
closeModal
booleanCloseModalOptions
openModal
boolean
toggleModal
boolean
break
boolean
skip
numberboolean
showFeedback
boolean
children
ReactNode
wrapWith
ReactElement<unknown, string | JSXElementConstructor<any>>
ref
Ref<HTMLSpanElement>
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see React Docs
key
Key

Events

PropertyTypeDescription
onAction
ActionFn

Auf dieser Seite