Zum Hauptinhalt springen

Texteingabe

Texteingabe 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​

Lesen Sie den Abschnitt Verwendung, um zu erfahren, wie und wann Sie die Texteingabekomponente verwenden können.

Basiseingabe​

Die TextInput-Komponente benötigt nur die Eigenschaft label, um angezeigt zu werden. Andere Eigenschaften wie placeholder, secondaryLabel und onChange können verwendet werden, um das Verhalten zu ergänzen.

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

Schreibgeschützt​

TextInput und die anderen Eingaben bieten die Möglichkeit, die Komponente als display only zu setzen. Wenn diese Eigenschaft displayOnly auf true festgelegt ist, wird die Komponente als Text angezeigt, ohne das spezifische Aussehen der Eingabe.

<TextInput
  label="Text input component"
  placeholder="Write what you want here"
  secondaryLabel="Free text input"
  value="this is the value"
  displayOnly={true}
/>

QuickInfo​

Durch die tooltip-Eigenschaft wird für die Komponente das QuickInfo-Symbol angezeigt. Wenn der Benutzer damit interagiert, werden auch einige ergänzende Informationen angezeigt. Diese Eigenschaft kann anzuzeigenden Text empfangen {text: "this will be displayed when tooltip is opened"}. Sie können auch steuern, welche spezifische Aktion die QuickInfo anzeigen lässt, indem Sie ein zweites Attribut trigger übergeben. Dies akzeptiert die standardmäßigen HTML-Ereignisse wie pointerover, focus und blur. Standardmäßig wird die QuickInfo durch Klicken auf das QuickInfo-Symbol geöffnet.

In diesem Beispiel wird die QuickInfo angezeigt, wenn sich der Mauszeiger über dem QuickInfo-Symbol befindet.

<TextInput
  label="Text input component"
  placeholder="Write what you want here"
  secondaryLabel="Free text input"
  tooltip={{ text: 'tooltip text', trigger: 'pointerover' }}
/>

Texteingabeüberprüfung bei Änderung​

TextInput stellt keine spezielle Validierungslogik zur Verfügung, bietet aber eine Methode, 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 das onChange-Ereignis ausgelöst wird.

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

  const onChange = useCallback((e, newValue) => {
    if (!newValue || newValue.indexOf('a') == -1) {
      setValidationMessages({});
    } else {
      setValidationMessages({
        error: ['The text cannot contain `a` character'],
      });
    }
  }, []);

  return (
    <TextInput
      label="Do not accept words with 'a'"
      secondaryLabel="Will raise an error if contains 'a' character"
      stateMessages={validationMessages}
      onChange={onChange}
    />
  );
}

Kontrollierte Komponente​

Die value-Eigenschaft kann für das Szenario der kontrollierten Komponenten verwendet werden:

export function InputControlled() {
  const [updatedValue, setNewValue] = useState('first given value');

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

  return (
    <div>
      <TextInput
        label="Enter here the value to be assigned input below"
        onChange={onChange}
      />
      <br />
      <TextInput
        label="Changes with the above"
        secondaryLabel="This cannot be manually modified"
        value={updatedValue}
      />
    </div>
  );
}

Verwendung von ref zur Festlegung des Fokus​

TextInput zusammen mit anderen Eingaben ermöglichen es Ihnen, über eine ref-Eigenschaft auf einige native Verhaltensweisen zuzugreifen. Es werden jedoch nur einige Funktionen verfügbar gemacht. In diesem Fall wird beim Klicken auf die Schaltfläche automatisch der Fokus auf die folgende Eingabe gesetzt:

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

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

  return (
    <div>
      <Button
        label="Set focus on text input"
        onClick={setFocus}></Button>
      <TextInput
        label="Get the focus from the button"
        ref={inputRef}
      />
    </div>
  );
}