Passo-by-passo: devextreme come impostare l'opzione selezionata del gruppo radio

Devextreme di Devexpress è una libreria piena di componenti dell'interfaccia utente pronti per le app Web. Funziona con Angular, React, Vue e persino jQuery. Uno dei suoi widget popolari è il radiogruppo , che consente agli utenti di scegliere un'opzione da un elenco.

Nei moduli, pagine di impostazioni o dashboard, il radiogruppo aiuta a guidare gli utenti a scegliere una sola risposta. Ad esempio, potresti lasciarli scegliere tra "piano mensile" e "piano annuale". Per rendere l'app fluida, gli sviluppatori spesso desiderano impostare una scelta predefinita o preselezionare un valore. Ecco dove entra in gioco la proprietà del valore nel radiogruppo.

Cos'è un radiogruppo Devextreme?

Il widget radiogruppo è un controllo di input semplice ma potente. Prende un dati dati (come un elenco di array o JSON) e mostra i pulsanti di opzione per ogni elemento. Gli utenti possono quindi fare clic per selezionarne uno. A differenza di un gruppo di assegno , in cui è possibile scegliere più elementi, il radiogruppo consente una sola scelta alla volta.

Gli sviluppatori di solito si preoccupano di due cose: cos'è l' articolo selezionato e come impostarlo correttamente. Il widget tiene traccia della scelta corrente attraverso la proprietà Value . Quando si modifica questa proprietà, gli elementi selezionati aggiornano. Funziona in tutti i framework - Angular, React, Vue e JQuery - poiché il widget segue la stessa API.

Imposta un valore selezionato predefinito nel radiogruppo

L'impostazione di un valore selezionato predefinito viene eseguita tramite l'opzione Valore durante l'inizializzazione del widget. Passano il valore che corrisponde a uno degli elementi nella dati dati e quell'elemento viene visualizzato come preselezionato.

Ecco un semplice esempio che utilizza JavaScript semplice con un dati di dati JSON:

$ ("#RadiogroupContainer"). Dxradiogroup ({
Articoli: ["Basic", "Standard", "Premium"],
Valore: “Standard” // Predefinito selezionato
});

In questo esempio, l'opzione "standard" verrà già selezionata quando la pagina si carica. Ciò è utile quando si desidera guidare gli utenti alla scelta più comune o consigliata.

Puoi anche legarsi agli oggetti anziché alle stringhe semplici. Per esempio:

Qui, le proprietà ValueExpr e DisplayExpr assicurano che il widget sappia quale campo utilizzare per il valore e quale campo mostrare all'utente.

Modifica a livello di programmazione l'elemento selezionato

A volte non vuoi che il radiogruppo mostri solo un valore predefinito. Potrebbe essere necessario modificare l'opzione selezionata in seguito, forse dopo che l'utente ha completato un altro passaggio nel modulo o quando i dati tornano da un'API.

In Devextreme, questo viene fatto aggiornando la proprietà del valore del radiogruppo. Se hai creato il widget con jQuery, puoi chiamare l'opzione () per cambiarlo in fase di esecuzione.

Esempio:

Quando l' opzione ("valore", ...) viene eseguita la chiamata, il radiogruppo evidenzia immediatamente "Premium". Funziona anche in angolare, react e vue - in quei quadri, di solito si lega il valore allo stato o a una variabile. Quando lo stato cambia, l'elemento selezionato si aggiorna automaticamente.

Questo approccio è utile per i moduli in cui la selezione dipende da altri input. Ad esempio, se un utente sceglie "Account aziendale", è possibile impostare automaticamente il radiogruppo su "Piano annuale" anziché "Piano mensile".

Gestione dell'evento onvaluechanged

Impostare un valore è un lato della storia. Catturare l'interazione dell'utente è l'altro. L'evento onvaluechanged in devextreme consente di reagire ogni volta che l'utente cambia la loro selezione.

Ecco un semplice esempio:

Ogni volta che l'utente sceglie un piano diverso, la console stampa il nuovo valore. Questo evento è la chiave quando si desidera aggiornare altre parti della pagina o inviare la selezione a un database.

Nei framework, questo funziona allo stesso modo ma segue i loro modelli di eventi. In React, ad esempio, è possibile utilizzare lo stato e passare una funzione di gestore che si accende quando il radiogruppo cambia. In Angular o Vue, è possibile legare direttamente con l'associazione dei dati a due vie e utilizzare l'output dell'evento per tracciare le modifiche.

Pensa a onvaluechanged come al tuo "ascoltatore". Collega l'azione dell'utente alla logica aziendale, come mostrare un prezzo diverso, consentire un pulsante o regolare i campi correlati. Senza di essa, il radiogruppo visualizzerebbe solo le opzioni senza far sapere al resto dell'app cosa ha scelto l'utente.

Esempi specifici del framework

Devextreme funziona in molti framework e l'impostazione del valore del radiogruppo selezionato è quasi lo stesso ovunque, ma la sintassi cambia un po '.

1. Esempio angolare:

In angolare, di solito si lega il valore a una proprietà componente.

<dx-radio-group
[articoli] = "['base', 'standard', 'premium']"
[(value)] = "selectedPlan">
</dx-radio-group>

Qui, selectedPlan nei controlli del file TypeScript quale elemento è selezionato. Se si modifica selectedPlan , il radiogruppo si aggiorna immediatamente.

2. React Esempio:

React utilizza componenti controllati, quindi gestisci la selezione con lo stato.

Quando l'utente sceglie un piano diverso, setPlan aggiorna lo stato e il radiogruppo mostra la nuova selezione.

3. Vue Esempio:

VUE lo rende facile con v-model

La modifica selectedPlan in VUE Data aggiorna immediatamente il radiogruppo.

4. Esempio jQuery:

JQuery è semplice perché si crea un'istanza e impostare il valore.

Risoluzione dei problemi di problemi comuni

Anche con semplici widget, le cose possono andare storte. Ecco i problemi più comuni che gli sviluppatori devono affrontare:

• Valore non aggiornando: questo di solito accade quando il valore impostato non corrisponde a valueExpr nel tuo dati dati. Ad esempio, se la tua dati dati utilizza id , ma si tenta di impostare il testo invece, nulla cambia.
• Radiogruppi multipli in un modulo: se si utilizza lo stesso legame dati per due widget, possono interferire tra loro. Utilizzare sempre attacchi univoci o uno stato separato per ciascun gruppo.
• Problemi di styling o di layout: a volte il radiogruppo non sembra proprio all'interno di forme o griglie. Assicurati che il contenitore abbia abbastanza spazio e che il CSS non abbia stravagante gli stili di Devextreme.

La maggior parte di questi problemi si riduce a valori non corrispondenti o attacchi mancanti. Controllando il tuo value , valueExpr e dataSource di solito li risolve.

Conclusione

Il widget radiogruppo in Devextreme è uno strumento semplice ma importante. Si utilizza la proprietà Value per impostare un'opzione predefinita, ("valore") per modificarla in seguito e onvaluechange per acquisire le azioni dell'utente. In Angular, React, Vue o JQuery, il metodo è lo stesso: lega il valore correttamente e funziona.

Se qualcosa non è aggiornato, controlla l'associazione dei dati e assicurati che il valore corrisponda al tuo dati dati. Una volta impostato a destra, il radiogruppo diventa un modo regolare per guidare gli utenti a fare la scelta che desideri.