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

Unter den verfügbaren Komponenten haben einige Eigenschaften mit initial im Namen. Das bedeutet, dass die Komponente über einen uncontrolled-Modus verfügt und die Eigenschaft initial\* verwendet werden kann, um den initialen Zustand zu definieren. Dies bedeutet nicht, dass für die Komponente auch der controlled-Modus verfügbar ist. Im Gegensatz zu einigen älteren Komponenten haben die neuen Versionen keine Eigenschaften mit default im Namen.

Note:

• Manche älteren Komponenten (in @jutro/legacy) verhalten sich anders als in Version 10.0 hinzugefügte Komponenten.
• In Version 10.0 wurden viele Komponenten, z. B. DateField, eingefügt. Diese Komponenten verhalten sich wie ältere Komponenten, wurden aber nicht für die neueste Version aktualisiert.
• In diesem Dokument werden die neuen Komponenten beschrieben. Um mehr über in der aktuellen Version enthaltene Legacy-Komponenten oder ältere Komponenten 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 für die Anzeige 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 nachdem, was übergeben wird, 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: onChange, valueund 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.

• Übergeben Sie onChange und initialValue, jedoch nicht value: unkontrolliert.

  Wie oben. Aktualisierungen von 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 kontrollierten Modus: Diese Komponenten ändern die Sichtbarkeit 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 unkontrollierten Modus: Die Sichtbarkeit der Komponenten ändert sich basierend auf einem internen Auslöser, z. B. der Accordion-Komponente. Der initiale Zustand der Komponente kann auf „initial“ festgelegt werden. Später wird der Zustand innerhalb der Komponente verwaltet.

  Im folgenden Beispiel für ein Accordion werden einige Inhalte in Registerkarten angezeigt, aber das Ändern der Registerkarten hat keine Änderungen in der Anwendung zur Folge. Der Hauptzweck besteht darin, 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 Kontrollierbarkeitsaspekt 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>
  );