Zum Hauptinhalt springen

Textbereich

Textbereich 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 Textbereichskomponente verwenden können.

Einfache TextArea-Komponente​

Die TextArea-Komponente hat nur eine erforderliche Eigenschaft: label. Sie können andere Eigenschaften verwenden, um ihr Verhalten zu ergänzen, z. B. placeholder, secondaryLabel, onChange usw.

<TextInput
  label="Text area component"
  placeholder="Write something here"
  secondaryLabel="Free text element"
/>

Zeichenzähler​

Die TextArea-Komponente kann einen Zeichenzähler anzeigen. Sie müssen die Eigenschaften maxLength und showCounter festlegen, um ihn zu aktivieren.

<TextArea
  label="Text area component"
  placeholder="Write something here"
  maxLength={50}
  showCounter={true}
/>

TextArea mit QuickInfo​

Durch die tooltip-Eigenschaft wird für die TextArea-Komponente das QuickInfo-Symbol angezeigt und, wenn der Benutzer mit ihm interagiert, werden einige ergänzende Informationen angezeigt. Diese Eigenschaft kann einfach den 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. Es akzeptiert die standardmäßigen HTML-Ereignisse wie pointerover, focus oder blur. Standardmäßig wird die QuickInfo geöffnet, wenn der Benutzer auf das QuickInfo-Symbol klickt.

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

<TextArea
  label="Text input component"
  placeholder="Write something here"
  secondaryLabel="Free text input"
  tooltip={{ text: 'tooltip text', trigger: 'pointerover' }}
/>

TextArea-Validierung bei Änderung​

Die TextArea-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 TextAreaValidation() {
  const [validationMessages, setValidationMessages] = useState({});

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

  return (
    <TextArea
      label="Do not accept words containing the 'a' character"
      secondaryLabel="Raises an error if the input contains the character 'a'"
      stateMessages={validationMessages}
      onChange={onChange}
    />
  );
}

Kontrollierte Komponente​

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

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

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

  return (
    <div>
      <TextArea
        label="Enter the value to be assigned to the input below"
        onChange={onChange}
      />
      <br />
      <TextArea
        label="Changes with the above"
        secondaryLabel="This value is automatically updated when the value above changes"
        value={updatedValue}
      />
    </div>
  );
}

Verwendung von ref zur Festlegung des Fokus​

TextArea 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 TextAreaRef() {
  const textAreaRef = useRef(null);

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

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