Zum Hauptinhalt springen

Währungseingabe

Währungseingabe in Storybook
Note: Es gibt veraltete Versionen dieser Komponente. Wechseln Sie zu einer Version, die älter als 10.0.x ist, um die entsprechende Dokumentation anzuzeigen.

Beispiele​

Im Abschnitt Verwendung finden Sie Informationen darüber, wie und wann Sie die Komponente CurrencyInput verwenden können.

Eingabe mit nur einer verfügbaren Währung​

Die Komponente CurrencyInput ist Teil des @jutro/components-Pakets. Die Eigenschaft availableCurrencies (ein Array) muss unbedingt bereitgestellt werden, mit mindestens einem Element. Wenn nur eine Option angegeben ist, kann die Währungsauswahl nicht bearbeitet werden und diese Option wird angezeigt.

Außerdem können Sie mit der Eigenschaft currencyDisplay festlegen, ob das Währungssymbol ($, €, £ ...) oder der Code (USD, EUR, GBP ...) angezeigt werden soll.

Wenn Sie einen Initialwert festlegen möchten, kann die Eigenschaft initiaValue ein Objekt mit 2 Attributen unterstützen: amount und currency.

import CurrencyInput from '@jutro/components';

// ...

<CurrencyInput
  availableCurrencies={['USD']}
  initialValue={{
    amount: 15467,
    currency: 'USD',
  }}
  label="Currency input component"
  currencyDisplay="code"
  tooltip={{
    text: 'This is a tooltip',
    trigger: 'mouseenter',
  }}
/>;

Eingabe mit mehreren Währungen​

Wie im vorherigen Beispiel müssen Sie die Eigenschaft availableCurrencies mit der Liste der zur Auswahl stehenden Währungen (unter Verwendung des Währungscodes) festlegen:

import CurrencyInput from '@jutro/components';

// ...

<CurrencyInput
  availableCurrencies={['USD', 'EUR', 'GBP']}
  initialValue={{
    amount: 15467,
    currency: 'GBP',
  }}
  label="Currency input component"
/>;

Validierung der Benutzereingabe bei Änderung​

Das Ereignis onChange unterstützt den neuen Wert, den Sie eingeben, als zweiten Parameter und verwendet ihn für die Validierung. Verwenden Sie die Eigenschaft stateMessages, wenn ein Fehler angezeigt werden soll:

import { useCallback, useState } from 'react';
import { CurrencyInput } from '@jutro/components';

export function CurrencyInputValidation() {
  const [validationMessages, setValidationMessages] = useState({});

  const onChange = useCallback((e, newValue) => {
    const componentValue = newValue.amount;

    if (!componentValue || componentValue != 10) {
      setValidationMessages({
        error: ["The value must be 10. If it's not, we won't not accept it."],
      });
    } else {
      setValidationMessages({});
    }
  }, []);

  return (
    <CurrencyInput
      availableCurrencies={['USD']}
      label="Accept only 10"
      secondaryLabel="Will raise an error except when value is 10"
      stateMessages={validationMessages}
      onChange={onChange}
    />
  );
}

Kontrollierte Komponente​

Sie können die value-Eigenschaft für das Szenario der kontrollierten Komponente verwenden:

import { useState } from 'react';
import { CurrencyInput, NumberInput } from '@jutro/components';

export function CurrencyInputControlled() {
  const [updatedValue, setAmount] = useState({
    amount: 200,
    currency: 'USD',
  });

  const onChange = (e, newValue) => {
    setAmount({ amount: newValue, currency: 'USD' });
  };

  return (
    <div>
      <NumberInput
        label="Enter the amount to be assigned to the next field"
        onChange={onChange}
      />
      <CurrencyInput
        availableCurrencies={['USD']}
        label="Changes with the above"
        secondaryLabel="This value is automatically updated when the value in the first field changes"
        value={updatedValue}
      />
    </div>
  );
}

Zugriff auf die Ref-Eigenschaft zum Festlegen des Fokus' (imperativer Handler)​

Die Währungseingabe und weitere Eingaben ermöglichen, über eine ref-Eigenschaft auf einige native Verhaltensweisen zuzugreifen. Es werden jedoch nur bestimmte Funktionen verfügbar gemacht. Wenn Sie in diesem Beispiel die Schaltfläche anklicken, wird automatisch die Währungseingabe unten fokussiert.

import { useRef } from 'react';
import { CurrencyInput, Button } from '@jutro/components';

export function CurrencyInputRef() {
  const currencyRef = useRef(null);

  const setFocus = (e) => {
    currencyRef?.current?.focus();
  };

  return (
    <div>
      <Button
        label="Set focus on currency input"
        onClick={setFocus}></Button>
      <CurrencyInput
        availableCurrencies={['USD']}
        label="Get the focus from the button"
        ref={currencyRef}
      />
    </div>
  );
}