Zum Hauptinhalt springen

Maskierte Eingabe

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

Beispiele​

Einfache maskierte Eingabe​

import React from 'react';
import { MaskInput } from '@jutro/components/new';

export const BasicMaskinput = () => {
  return (
    <MaskInput
      label="Mask input component"
      mask="(999) 999-9999"
      secondaryLabel="This is a secondary label"
      initialValue="(123) 942-4237"
    />
  );
};
Note: Wenn initialValue festgelegt ist und nicht mit der Maske übereinstimmt, wird dieser Wert verworfen.

formatChars in maskierter Eingabe​

Sie können eine benutzerdefinierte Zuordnung von Formatierungszeichen und den entsprechenden regulären Ausdrücken erstellen, die für die Eingabe vorgegeben sind. In diesem Beispiel steht die Maske DDD für alle Buchstaben von a bis z in Großbuchstaben und 0000 für alle Zahlen von 0 bis 5.

import React, { useState } from 'react';
import { MaskInput } from '@jutro/components/new';
import { TextInput } from '@jutro/components';

export const FormatCharsMaskInput = () => {
  const [value, setValue] = useState('');

  // Define the mask format and placeholder characters
  const formatChars = {
    D: '[A-Z]',
    0: '[0-5]',
  };

  return (
    <div>
      <MaskInput
        label="Enter 3 letters in upper case"
        mask="DDD-0000"
        formatChars={formatChars}
      />
    </div>
  );
};

Kontrollierte maskierte Eingabe​

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

import React, { useState } from 'react';
import { MaskInput } from '@jutro/components/new';
import { TextInput } from '@jutro/components';

export const ControlledMaskInput = () => {
  const [enteredValue, setEnteredValue] = useState('');

  const onChangefunc = (event) => {
    const newValue = event.target.value;
    setEnteredValue(newValue);
    console.log('Entered value:', newValue);
  };

  return (
    <div>
      <MaskInput
        label="Enter a number to be assigned to the following field"
        mask="(999) 999-9999"
        onChange={onChangefunc}
        stateMessages={{}}
        required
      />
      <TextInput
        label="The value is updated when the first field is modified"
        value={enteredValue}
      />
    </div>
  );
};

Validierung​

Mit den Eigenschaften onChange und onBlur können Sie die Eingabe validieren, wenn das Feld geändert wird oder den Fokus verliert. In diesem Beispiel wird das Feld außerdem über die required-Eigenschaft als Pflichtfeld festgelegt.

import React, { useState } from 'react';
import { MaskInput } from '@jutro/components/new';
import { TextInput } from '@jutro/components';

export const ValidationMaskInput = () => {
  const [enteredValue, setEnteredValue] = useState('');

  const onBlurfunc = (event) => {
    const newValue = event.target.value;
    setEnteredValue(newValue);
  };

  return (
    <div>
      <MaskInput
        label="Validation onBlur example"
        mask="(999) 999-9999"
        onBlur={onBlurfunc}
        stateMessages={{}}
        required
      />
      <TextInput
        label="The value is updated when the first field loses its focus"
        value={enteredValue}
      />
    </div>
  );
};

Fehlermeldung​

Es kann eine benutzerdefinierte Fehlermeldung festgelegt werden.

import React from 'react';
import { MaskInput } from '@jutro/components/new';

export const ErrorMaskInput = () => {
  return (
    <MaskInput
      label="Error field"
      mask="(999) 999-9999"
      stateMessages={{
        error: ['This is a custom error message'],
      }}
    />
  );
};