Zum Hauptinhalt springen

Telefoneingabe

Telefoneingabe 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 PhoneNumberInput verwenden können.

Einfache Telefonnummer mit nur einem Land​

Obwohl Sie nicht verpflichtet sind, PhoneNumberInput einen Ländercode zu übergeben, verhält sich die Komponente ohne Ländercode nicht wie eine Telefonnummerneingabe. Sie haben 3 verschiedene Möglichkeiten, diese anzugeben:

  1. Mit der countries-Eigenschaft: Damit können Sie einen einzelnen ISO-Ländercode übergeben, der als Standard verwendet wird, und der numerische Ländercode wird angezeigt.
<PhoneNumberInput
  label="Phone input component with US set as default"
  countries={['US']}
/>
  1. Mit der initialValue-Eigenschaft: Damit wird die Eingabekomponente initialisiert und der Ländercode wird nicht angezeigt. Die telefonbezogenen Funktionen funktionieren jedoch normal.
<PhoneNumberInput
  label="Phone input component"
  initialValue={{
    countryCode: 'US',
    phoneNumber: '',
  }}
/>
  1. Mit der value-Eigenschaft: Damit wird die Komponente gesteuert. Die Komponente ist initialisiert und der Ländercode wird nicht angezeigt. Die telefonbezogenen Funktionen funktionieren jedoch normal.
<PhoneNumberInput
  label="Phone input component"
  initialValue={{
    countryCode: 'US',
    phoneNumber: '',
  }}
/>

Telefoneingabe mit mehreren Ländercodes​

Die PhoneNumberInput-Komponente zeigt eine Dropdown-Auswahl für Ländercodes an, wenn Sie mehr als einen ISO-Ländercode in der countries-Eigenschaft angeben. Wenn Sie keine initialValue angeben, wird der erste Ländercode im Array als Anfangswert in der Auswahlliste angezeigt.

<PhoneNumberInput
  label="Phone input component"
  countries={['PL', 'ES', 'US']}
/>

Einfache Telefonnummer mit benutzerdefiniertem Platzhalter​

Die PhoneNumberInput-Komponente verwaltet den Platzhalter, der je nach ausgewähltem Land angezeigt wird. Sie können ihn jedoch überschreiben und einen eigenen Platzhalter festlegen.

<PhoneNumberInput
  label="Phone input component with a custom placeholder"
  countries={['PL', 'US']}
  placeholder="this is a custom placeholder"
/>

Validierung der Telefoneingabe bei Änderungen​

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

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

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

  const onChange = useCallback((e, newValue, errorCode) => {
    const componentPhoneNumber = newValue.phoneNumber;
    const componentCountryCode = newValue.countryCode;
    const componentErrorCode = errorCode?.errorCode;

    setValidationMessages({});

    if (componentErrorCode && componentErrorCode != 0) {
      setValidationMessages({
        error: ['The phone number is not correct'],
      });
    } else {
      if (
        componentPhoneNumber &&
        componentCountryCode &&
        componentCountryCode == 'ES' &&
        componentPhoneNumber.indexOf('6') == 0
      ) {
        setValidationMessages({
          error: ['Only landline numbers are accepted for Spain'],
        });
      }
    }
  }, []);

  return (
    <PhoneNumberInput
      countries={['ES', 'US']}
      label="Accepts any US number but accepts only landline numbers for Spain"
      secondaryLabel="Landline numbers cannot start by 6"
      stateMessages={validationMessages}
      onChange={onChange}
    />
  );
}

Verwendung von ref zur Festlegung des Fokus (imperativer Handler)​

PhoneNumberInput und andere Eingaben ermöglichen es Ihnen, über eine ref-Eigenschaft auf einige native Verhaltensweisen zuzugreifen. Es werden jedoch nur bestimmte Funktionen verfügbar gemacht. Wenn Sie in diesem Beispiel auf die Schaltfläche klicken, wird der Fokus automatisch in der Eingabe unten gesetzt.

export function PhoneNumberRef() {
  const inputRef = useRef(null);

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

  return (
    <div>
      <Button
        label="Set the focus on input"
        onClick={setFocus}></Button>
      <PhoneNumberInput
        label="Get the focus from the button"
        countries={['ES', 'US']}
        ref={inputRef}
      />
    </div>
  );
}