Zum Hauptinhalt springen

Zahleneingabe

Zahleneingabe 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 eine Zahleneingabe-Komponente verwenden können.

Basiseingabe​

Zum Anzeigen einer einfachen Zahleneingabe-Komponente ist lediglich die Eigenschaft label erforderlich. Andere Eigenschaften können verwendet werden, um ihr Verhalten zu ergänzen: placeholder, secondaryLabel, onChange oder die zahlenbezogenen Eigenschaften.

<NumberInput
  label="Number input component"
  placeholder="Write what you want here"
  secondaryLabel="Free text input"
/>

Max. und Min.​

Mit der Zahleneingabe-Komponente können die Maximal- und Minimalwerte festgelegt werden. Dies hat jedoch nichts mit einer Validierungsfunktion zu tun, sondern mit dem Verhalten der Komponente. Wenn Sie eine dieser beiden Eigenschaften einstellen, ist es nicht möglich, mit den Komponentenpfeilen einen Wert einzustellen, der unter der min-Eigenschaft liegt oder einen Wert, der über der max-Eigenschaft liegt.

Wenn eine spezielle Validierung erforderlich ist, muss diese vom Entwickler vorgenommen werden. Einzelheiten dazu finden Sie im Beispiel für die Validierung der Zahleneingabe bei Änderungen.

<NumberInput
  label="Number input component with min and max"
  placeholder="Enter a value"
  secondaryLabel="Test the limits with using the arrows"
  min={20}
  max={40}
/>

Validierung der Zahleneingabe bei Änderungen​

Die Zahleneingabe-Komponente stellt keine spezielle Validierungslogik zur Verfügung, bietet aber die Möglichkeit, die Validierung durch den Entwickler einzubeziehen und die Eigenschaft stateMessages zur Anzeige der erforderlichen Fehlermeldung zu verwenden.

Dies ist ein Beispiel für die Handhabung der Validierung, wenn ein onChange-Ereignis ausgelöst wird.

export function NumberInputValidation() {
  const [validationMessages, setValidationMessages] = useState({});
  const max = 100;
  const min = 0;

  const onChange = useCallback((e, newValue) => {
    setValidationMessages({});

    if (newValue && (newValue > max || newValue < min)) {
      setValidationMessages({
        error: ['Value must be between 0 and 100'],
      });
    }
  }, []);

  return (
    <NumberInput
      label="Enter value"
      secondaryLabel="Min = 0. Max = 100"
      stateMessages={validationMessages}
      min={min}
      max={max}
      onChange={onChange}
    />
  );
}

Dezimalstellen​

Mit der Eigenschaft decimalPlaces können Sie angeben, wie viele Dezimalstellen angezeigt werden sollen. Standardmäßig wird keine Einschränkung angewendet und jeder vom Benutzer eingegebene Wert wird angezeigt. Er wird jedoch geändert, wenn die Eingabe den Fokus verliert. Außerdem wird der Wert bei der Eingabe auf die nächste Dezimalstelle gerundet.

Beispiel: Wenn decimalPlaces auf 2 festgelegt ist und der Benutzer 5.666 eingibt, wird der Wert in 5.67 umgewandelt, wenn die Eingabe den Fokus verliert.

<NumberInput
    label="Number input component limited decimals"
    placeholder="Enter a value"
    secondaryLabel="Try to add an additional digit"
    initialValue={5.66}
    decimalPlaces={2}
  />
/>

Dezimalstellen mit Validierung​

Wenn die Eigenschaft decimalPlaces festgelegt ist, kann ein Benutzer weiterhin zusätzliche Dezimalstellen eingeben. Die Rundung erfolgt erst, wenn das Element den Fokus verliert. Um Benutzer zu warnen, dass sich der Wert ändern wird, können Sie Validierungslogik zur Anzeige einer Warnung hinzufügen.

export function NumberInputDecimalValidation(decimalPlaces: number) {
  const [validationMessages, setValidationMessages] = useState({});

  function countDecimalPlaces (value) {
      if ((value % 1) != 0) {
          return value.toString().split(".")[1].length;
      }
      return 0;
  }

  const checkDecimal = useCallback((e, newValue) => {
      setValidationMessages({});
      if (newValue && countDecimalPlaces(newValue) > decimalPlaces) {
          setValidationMessages({
              error: [`Value will be rounded to closest ${decimalPlaces} decimal places`],
          });
      }
      }, []);

  return (
    <NumberInput
      label="Number input component limited decimals"
      placeholder="Enter a value"
      secondaryLabel="Try to add an additional decimal"
      initialValue={ 5.66 }
      stateMessages={ validationMessages }
      decimalPlaces={ decimalPlaces }
      onChange={ checkDecimal }
  />
)