Werte und Sichtbarkeit von Komponenten

Die Bezeichnung einer Komponente als „kontrolliert“ (controlled) oder „unkontrolliert“ (uncontrolled) bezieht sich auf zwei unabhängige Aspekte der Komponente:

• den Wert der Komponente
• die Sichtbarkeit der Komponente

Einige der verfügbaren Komponenten haben Eigenschaften, die initial im Namen enthalten. Das bedeutet, dass die betreffende Komponente den Modus uncontrolled hat und die Eigenschaft initial\* zum Definieren des Anfangszustands verwendet werden kann. Das bedeutet jedoch nicht, dass für die Komponente auch der Modus controlled verfügbar ist. Im Gegensatz zu bestimmten Legacy-Komponenten enthalten neue Versionen keine Eigenschaften mit default im Namen.

Note:

• Manche Legacy-Komponenten (in @jutro/legacy) verhalten sich anders als Komponenten, die in Version 10.0 hinzugefügt wurden.
• In Version 10.0 wurden viele Komponenten, z. B. DateField, eingefügt. Diese Komponenten verhalten sich wie Legacy-Komponenten, wurden aber nicht für neueste Release aktualisiert.
• In diesem Dokument werden die neuen Komponenten beschrieben. Um mehr über Legacy-Komponenten oder ältere Komponenten, die im neuesten Release enthalten sind, zu erfahren, wechseln Sie zu einer Version der Dokumentation, die älter als 10.0.x ist.

Kontrollieren des Werts

Wenn Sie die Komponente mit dem Anwendungszustand verknüpfen möchten, verwenden Sie den kontrollierten Modus. Alternativ können Sie unkontrollierte Komponenten verwenden, wenn Sie die Komponente hauptsächlich zum Anzeigen von Inhalten verwenden.

Weitere Informationen zum Konzept von kontrollierten und unkontrollierten Komponenten in React finden Sie hier.

Eingaben können kontrolliert oder unkontrolliert sein. Drei Eigenschaften sind verfügbar:

• initialValue
• value
• onChange

Je nach Übergabe ist die Komponente entweder kontrolliert oder unkontrolliert:

Als kontrolliert festlegen

• Übergabe von onChange und value, jedoch nicht von initialValue: kontrolliert.
  Der Zustand muss in der Anwendung gespeichert und an die Komponente übergeben werden.

• Übergabe von allen Eigenschaften: onChange, value und initialValue: kontrolliert.
  Wie oben. initialValue wird verworfen.

  Sie haben die volle Kontrolle über den Wert der Komponente.

  const [value, setValue] = useState('initial value');
  
  <TextInput
    label="Controlled input"
    value={value}
    onChange={(e) => {
      setValue(e.target.value.toLocaleUpperCase());
    }}
  />;

Als unkontrolliert festlegen

• Übergabe von onChange, jedoch nicht von value und initialValue: unkontrolliert.

  Der Benutzer kann mit der Komponente interagieren und ihren internen Zustand aktualisieren. Auf Wertänderungen kann mit einem onChange-Rückruf reagiert werden. Der Zustand der Komponente kann nicht programmgesteuert kontrolliert werden.

• Übergabe von onChange und initialValue, jedoch nicht von value: unkontrolliert.

  Wie oben. Änderungen an initialValue werden ignoriert.

  <TextInput
    label="Uncontrolled input"
    // initialValue="Initial value"
    onChange={(e) => {
      console.log(e.target.value);
    }}
  />

Kontrollieren der Sichtbarkeit

Die Sichtbarkeit einer Komponente kann auf verschiedene Weise kontrolliert werden, je nach verwendeter Komponente.

• Nur im controlled-Modus: Die Sichtbarkeit der Komponenten ändert sich basierend auf einem externen Auslöser. Ein gutes Beispiel für eine kontrollierte Komponente ist ModalNext. Weitere Informationen zu ModalNext und deren Verhalten finden Sie im Abschnitt Komponenten.

• Nur im uncontrolled-Modus: Die Sichtbarkeit der Komponenten ändert sich basierend auf einem internen Auslöser, z. B. Accordion-Komponente. Der Anfangszustand der Komponente kann auf „initial“ festgelegt werden. Später wird der Zustand innerhalb der Komponente verwaltet.

  Im folgenden Beispiel für eine Accordion-Komponente werden Inhalte in Registerkarten angezeigt. Das Ändern der Registerkarten führt aber zu keiner Änderung in der Anwendung. Hauptzweck ist es, den Inhalt der Registerkarten anzuzeigen. Beim ersten Rendern werden die offenen Karten durch ihre Eigenschaft initialExpanded bestimmt.

  const UncontrolledAccordion = () => {
    return (
      <Accordion>
        <AccordionCard
          title="Card 1"
          initialExpanded={false}>
          Test card 1
        </AccordionCard>
        <AccordionCard
          title="Card 2"
          initialExpanded>
          Test card 2
        </AccordionCard>
      </Accordion>
    );
  };

• Weitere Komponenten: Diese Komponenten kontrollieren nicht die Sichtbarkeit. Sie werden nicht durch den Aspekt der Kontrollierbarkeit von Komponenten beeinflusst.

  const [showSomeButton, setShowSomeButton] = useState(true);
  return (
    <React.Fragment>
      <Button
        label="I can hide the other button"
        onClick={() => setShowSomeButton((show) => !show)}
      />
      {showSomeButton && <Button label="I can be hidden" />}
    </React.Fragment>
  );