Schritt-für-Schritt: DevExtreme So setzen Sie die Option Funkgruppe ausgewählte Option

Devextreme von Devexpress ist eine Bibliothek voller Benutzeroberflächenkomponenten für Web-Apps. Es funktioniert mit Angular, React, Vue und sogar JQuery. Einer seiner beliebten Widgets ist die RadioGroup , mit der Benutzer eine Option aus einer Liste auswählen können.

In Formularen, Einstellungsseiten oder Dashboards hilft RadioGroup die Benutzer, nur eine Antwort auszuwählen. Zum Beispiel können Sie sie zwischen „monatlichem Plan“ und „jährlicher Plan“ auswählen lassen. Damit sich die App reibungslos anfühlt, möchten Entwickler häufig eine Standardauswahl festlegen oder einen Wert vor auswählen. Hier kommt die Werteigenschaft in der RadioGroup ins Spiel.

Was ist eine devextreme RadioGroup?

Das RadioGroup -Widget ist eine einfache, aber leistungsstarke Eingabesteuerung. Es dauert eine Datenquelle (wie eine Array- oder JSON -Liste) und zeigt Optionsfelder für jedes Element an. Benutzer können dann klicken, um eine auszuwählen. Im Gegensatz zu einer CheckboxGroup , bei der mehrere Elemente ausgewählt werden können, ermöglicht die RadioGroup nur eine einzige Auswahl gleichzeitig.

Entwickler kümmern sich normalerweise um zwei Dinge: Was der ausgewählte Element ist und wie man es richtig einstellt. Das Widget verfolgt die aktuelle Auswahl über die Werteigenschaft . Wenn Sie diese Eigenschaft ändern, aktualisieren die ausgewählten Elemente. Dies funktioniert in allen Frameworks - Angular, React, Vue und JQuery -, da das Widget derselben API folgt.

Legen Sie einen Standardwert in der RadioGroup ein

Das Einstellen eines Standardwerts für den ausgewählten Wert erfolgt über die Wertoption bei der Initialisierung des Widgets. Sie übergeben den Wert, der einem der Elemente in der DataSource entspricht, und dieses Element wird als vorausgewählt angezeigt.

Hier ist ein einfaches Beispiel, das einfach JavaScript mit einer JSON -Datenquelle verwendet:

$ („#RadioGroupContainer“). DxradioGroup ({{{
Elemente: ["Basic", "Standard", "Premium"],
Wert: "Standard" // Standard ausgewählt
});

In diesem Beispiel wird die Option „Standard“ bereits ausgewählt, wenn die Seite geladen wird. Dies ist nützlich, wenn Sie Benutzer zur gängigsten oder empfohlenen Wahl führen möchten.

Sie können auch an Objekte anstelle von einfachen Zeichenfolgen binden. Zum Beispiel:

Hier stellen die Eigenschaften von ValueExPR und DisplayExPR sicher, dass das Widget weiß, welches Feld für den Wert verwendet werden soll und welches Feld dem Benutzer angezeigt werden soll.

Programmatisch das ausgewählte Element programmatisch ändern

Manchmal möchte Sie nicht, dass die RadioGroup nur einen Standardwert zeigt. Möglicherweise müssen Sie die ausgewählte Option später ändern, möglicherweise nachdem der Benutzer einen weiteren Schritt in Ihrem Formular ausgeschlossen hat oder wenn Daten von einer API zurückgehen.

In DeVextreme erfolgt dies durch Aktualisierung der Werteigenschaft der RadioGroup. Wenn Sie das Widget mit JQuery erstellt haben, können Sie die Option () anrufen, um es zur Laufzeit zu ändern.

Beispiel:

Wenn die Option („Wert“,…) ausgeführt wird, zeigt die RadioGroup sofort „Premium“. Dies funktioniert auch in Angular, React und Vue - in diesen Frameworks binden Sie normalerweise den Wert an den Zustand oder eine Variable. Wenn sich dieser Zustand ändert, aktualisiert die ausgewählten Elemente automatisch.

Dieser Ansatz ist hilfreich für Formen, bei denen die Auswahl von anderen Eingaben abhängt. Wenn ein Benutzer beispielsweise „Geschäftskonto“ wählt, können Sie die RadioGroup möglicherweise automatisch auf „jährlichen Plan“ anstelle des „monatlichen Plans“ einstellen.

Umgang mit dem OnvaluEchanged -Ereignis

Das Festlegen eines Wertes ist eine Seite der Geschichte. Das Erfassen der Benutzerinteraktion ist die andere. Mit dem OnvaluEchanged -Ereignis in DeVextreme können Sie immer dann reagieren, wenn der Benutzer seine Auswahl ändert.

Hier ist ein einfaches Beispiel:

Immer wenn der Benutzer einen anderen Plan auswählt, druckt die Konsole den neuen Wert. Dieses Ereignis ist der Schlüssel, wenn Sie andere Teile der Seite aktualisieren oder die Auswahl an eine Datenbank zurücksenden möchten.

In Frameworks funktioniert dies auf die gleiche Weise, folgt jedoch ihren Ereignismodellen. In React können Sie beispielsweise Status verwenden und eine Handlerfunktion übergeben, die beim änderenden RadioGroup ausbreitet. In Angular oder Vue können Sie direkt mit einer Zwei-Wege-Datenbindung binden und die Ereignisausgabe verwenden, um Änderungen zu verfolgen.

Stellen Sie sich Onvaluechange als Ihren „Zuhörer“ vor. Es verbindet die Benutzeraktion mit Ihrer Geschäftslogik - wie das Anzeigen eines anderen Preises, das Aktivieren einer Taste oder das Anpassen der verwandten Felder. Ohne sie würde die RadioGroup nur Optionen angezeigt, ohne den Rest Ihrer App mitzuteilen, was der Benutzer ausgewählt hat.

Framework-spezifische Beispiele

Devextreme arbeitet in vielen Frameworks, und das Festlegen des ausgewählten RadioGroup -Werts ist überall fast gleich, aber die Syntax ändert sich ein wenig.

1. Angular Beispiel:

In Angular binden Sie normalerweise den Wert an eine Komponenteneigenschaft.

<DX-Radio-Gruppe
[items] = ”['Basic', 'Standard', 'Premium']“
[(Wert)] = ”SelectedPlan”>
</dx-radio-Gruppe>

Hier steuert selectedPlan in Ihrem TypeScript -Datei, welches Element ausgewählt ist. Wenn Sie selectedPlan ändern, werden die RadioGroup -Updates sofort aktualisiert.

2. Beispiel React Beispiel:

React verwendet kontrollierte Komponenten, sodass Sie die Auswahl mit Status verarbeiten.

Wenn der Benutzer einen anderen Plan auswählt, aktualisiert setPlan den Status, und die RadioGroup zeigt die neue Auswahl an.

3.. Vue -Beispiel:

Vue macht es mit v-model einfach.

Das Ändern selectedPlan in Ihren VUE -Daten aktualisiert die RadioGroup sofort.

4. JQuery Beispiel:

JQuery ist einfach, da Sie nur eine Instanz erstellen und den Wert festlegen.

Fehlerbehebung häufiges Problem

Selbst mit einfachen Widgets können Dinge schief gehen. Hier sind die häufigsten Probleme, mit denen Entwickler konfrontiert sind:

• Wert nicht aktualisiert: Dies geschieht normalerweise, wenn der von Ihnen festgelegte Wert nicht mit dem valueExpr in Ihrer Datenquelle übereinstimmt. Wenn beispielsweise Ihre DataSource id verwendet, aber Sie versuchen, den Text stattdessen festzulegen, ändert sich nichts.
• Mehrere RadioGroups in einem Formular: Wenn Sie für zwei Widgets dieselbe Datenbindung verwenden, können sie sich gegenseitig beeinträchtigen. Verwenden Sie für jede Gruppe immer eindeutige Bindungen oder einen separaten Zustand.
• Styling- oder Layoutprobleme: Manchmal schaut die RadioGroup nicht direkt in Formularen oder Gitter aus. Stellen Sie sicher, dass der Container über genügend Platz verfügt und das CSS die Stile von Devextreme nicht überschreibt.

Die meisten dieser Probleme sind auf nicht übereinstimmende Werte oder fehlende Bindungen zurückzuführen. Durch die Überprüfung Ihres value , valueExpr und dataSource löst sie normalerweise.

Abschluss

Das RadioGroup -Widget in DeVextreme ist ein einfaches, aber wichtiges Werkzeug. Sie verwenden die Value -Eigenschaft , um eine Standardeinstellung, Option („Wert“) festzulegen, um sie später zu ändern, und für OnvaluEchanged, um Benutzeraktionen zu erfassen. In Angular, React, Vue oder JQuery ist die Methode gleich - binden Sie den Wert korrekt und es funktioniert.

Wenn etwas nicht aktualisiert wird, überprüfen Sie Ihre Datenbindung und stellen Sie sicher, dass der Wert mit Ihrer Datenquelle übereinstimmt. Sobald Sie es richtig eingerichtet haben, wird die RadioGroup zu einer reibungslosen Möglichkeit, die Benutzer dazu zu bringen, die gewünschte Auswahl zu treffen.