Paso a paso: Devextreme Cómo establecer la opción seleccionada del grupo de radio

Devextreme de DeVExpress es una biblioteca llena de componentes de interfaz de usuario listos para usar para aplicaciones web. Funciona con Angular, React, Vue e incluso jQuery. Uno de sus widgets populares es el radiogrupo , que permite a los usuarios elegir una opción de una lista.

En formularios, páginas de configuración o paneles, RadioGroup ayuda a guiar a los usuarios a elegir solo una respuesta. Por ejemplo, puede dejarlos elegir entre "plan mensual" y "plan anual". Para que la aplicación se sienta sin problemas, los desarrolladores a menudo desean establecer una opción predeterminada o preseleccionar un valor. Ahí es donde entra la propiedad de valor en Radiogrupo.

¿Qué es un radiogrupo Devextreme?

El widget de radiogrupo es un control de entrada simple pero potente. Se necesita una fuente de datos (como una matriz o lista JSON) y muestra botones de radio para cada elemento. Los usuarios pueden hacer clic para seleccionar uno. A diferencia de un grupo de cheques , donde se pueden elegir varios elementos, Radiogrup permite solo una opción a la vez.

Los desarrolladores generalmente se preocupan por dos cosas: cuál es el elemento seleccionado y cómo configurarlo correctamente. El widget rastrea la opción actual a través de la propiedad de valor . Cuando cambia esta propiedad, el elemento seleccionado actualiza. Esto funciona en todos los marcos (Angular, React, Vue y JQuery, ya que el widget sigue la misma API.

Establecer un valor seleccionado predeterminado en radiogrupo

Configuración de un valor seleccionado predeterminado se realiza a través de la opción Valor al inicializar el widget. Pase el valor que coincide con uno de los elementos en la fuente de datos , y ese elemento aparece como preseleccionado.

Aquí hay un ejemplo simple usando JavaScript sencillo con una fuente de datos JSON:

$ ("#RadioGrupContainer"). DxRadiogroup ({
Elementos: ["básico", "estándar", "premium"],
valor: "estándar" // predeterminado seleccionado
});

En este ejemplo, la opción "Estándar" ya se seleccionará cuando la página se carga. Esto es útil cuando desea guiar a los usuarios a la opción más común o recomendada.

También puede unirse a objetos en lugar de cadenas simples. Por ejemplo:

Aquí, las propiedades ValueExpr y DisplayExpr se aseguran de que el widget sepa qué campo usar para el valor y qué campo mostrar al usuario.

Cambiar programáticamente el elemento seleccionado

A veces no desea que el radiogrupo solo muestre un valor predeterminado. Es posible que deba cambiar la opción seleccionada más tarde, tal vez después de que el usuario complete otro paso en su formulario o cuando los datos regresen de una API.

En Devextreme, esto se hace actualizando la propiedad de valor del radiogrupo. Si creó el widget con jQuery, puede llamar a la opción () para cambiarlo en tiempo de ejecución.

Ejemplo:

Cuando se ejecuta la opción ("valor", ...) , el radiogrupo resalta instantáneamente "premium". Esto funciona en Angular, React y Vue también: en esos marcos, generalmente se une el valor al estado o una variable. Cuando ese estado cambia, el elemento seleccionado se actualiza automáticamente.

Este enfoque es útil para los formularios donde la selección depende de otra entrada. Por ejemplo, si un usuario elige "cuenta comercial", puede establecer automáticamente el radiogrupo en "plan anual" en lugar de "plan mensual".

Manejo del evento Onvaluechanged

Establecer un valor es un lado de la historia. Capturar la interacción del usuario es la otra. El evento OnValueChanged en DeVextreme le permite reaccionar cada vez que el usuario cambia su selección.

Aquí hay un ejemplo simple:

Cada vez que el usuario elige un plan diferente, la consola imprime el nuevo valor. Este evento es clave cuando desea actualizar otras partes de la página o enviar la selección a una base de datos.

En los marcos, esto funciona de la misma manera, pero sigue sus modelos de eventos. En React, por ejemplo, puede usar el estado y pasar una función de controlador que se dispara cuando cambia el radiogrupo. En Angular o Vue, puede unirse directamente con la unión de datos de dos vías y usar la salida del evento para rastrear los cambios.

Piense en Onvaluechanged como su "oyente". Conecta la acción del usuario con la lógica de su negocio, como mostrar un precio diferente, habilitar un botón o ajustar los campos relacionados. Sin él, el radiogrupo solo mostraría opciones sin dejar que el resto de su aplicación supiera lo que el usuario eligió.

Ejemplos específicos del marco

Devextreme funciona en muchos marcos, y establecer el valor de radiogrupo seleccionado es casi el mismo en todas partes, pero la sintaxis cambia un poco.

1. Ejemplo angular:

En Angular, generalmente une el valor a una propiedad de componente.

<DX-Radio-Group
[elementos] = "['básico', 'estándar', 'premium']"
[(valor)] = "selectedplan">
</DX-Radio-Group>

Aquí, selectedPlan en su archivo TypeScript Controles qué elemento está seleccionado. Si cambia selectedPlan , el radiogrupo se actualiza de inmediato.

2. Reaccionar Ejemplo:

React utiliza componentes controlados, por lo que maneja la selección con el estado.

Cuando el usuario elige un plan diferente, setPlan actualiza el estado, y el radiogrupo muestra la nueva selección.

3. Ejemplo de vue:

Vue lo hace fácil con v-model .

Cambio de selectedPlan en su Vue Data actualiza el radiogrupo al instante.

4. Ejemplo de jQuery:

JQuery es simple porque solo crea una instancia y establece el valor.

Solución de problemas de problemas comunes

Incluso con widgets simples, las cosas pueden salir mal. Aquí están los problemas más comunes que enfrentan los desarrolladores:

• Valor no actualización: esto generalmente ocurre cuando el valor que establece no coincide con valueExpr en su fuente de datos. Por ejemplo, si su fuente de datos usa id , pero intenta establecer el texto, nada cambia.
• Múltiples radiogrupos en una forma: si usa el mismo enlace de datos para dos widgets, pueden interferir entre sí. Siempre use enlaces únicos o estado separado para cada grupo.
• Estilización o problemas de diseño: a veces el radiogrupo no se ve directamente dentro de formularios o cuadrículas. Asegúrese de que el contenedor tenga suficiente espacio y el CSS no esté anulando los estilos de Devextreme.

La mayoría de estos problemas se reducen a valores no coincidentes o enlaces faltantes. Verificar su value , valueExpr y dataSource generalmente los resuelve.

Conclusión

El widget de radiogrupo en Devextreme es una herramienta simple pero importante. Utiliza la propiedad Value para establecer una opción predeterminada, "valor") para cambiarla más tarde y onValueChanged para capturar las acciones del usuario. En Angular, React, Vue o jQuery, el método es el mismo: une el valor correctamente y funciona.

Si algo no se está actualizando, verifique su enlace de datos y asegúrese de que el valor coincida con su fuente de datos. Una vez que lo configura bien, Radiogrup se convierte en una forma fluida de guiar a los usuarios para que la elección que desee.