逐步：DEVEXTREME如何设置无线电组选定选项

DeVexPress的DeVexTreme是一个库，其中充满了Web应用程序的现成UI组件。它可以与Angular，React，Vue甚至JQuery一起使用。它流行的小部件之一是RadioGroup ，它使用户可以从列表中选择一个选项。

在表单，设置页面或仪表板中，RadioGroup可帮助用户选择一个答案。例如，您可以让他们在“每月计划”和“年度计划”之间进行选择。为了使应用程序保持光滑，开发人员通常希望设置默认选择或预选值。这就是放射线中的价值属性所在的地方。

什么是Devextreme radiogroup？

Radiogroup小部件是一个简单但功能强大的输入控件。它采用数据源（例如数组或JSON列表），并显示每个项目的无线电按钮。然后，用户可以单击以选择一个。与可以选择多个项目的CheckBoxGroup不同，RadioGroup一次只允许单个选择。

开发人员通常关心两件事：所选项目是什么以及如何正确设置它。小部件通过值属性跟踪当前选择。更改此属性时，所选项目更新。由于小部件遵循相同的API，因此在所有框架（Angular，React，Vue和jQuery）中起作用。

在Radiogroup中设置默认的选定值

初始化小部件时，通过值选项来设置默认选择值。您传递了与数据源中一个项目之一相匹配的值，该项目显示为预选。

这是一个简单的示例，使用json dataSource的普通javaScript：

$（“＃radiogroupcontainer”）。dxradiogroup（{
项目：[“基本”，“标准”，“ premium”]，
值：“标准” //默认选择
}）;

在此示例中，页面加载时将选择“标准”选项。当您想指导用户取得最常见或推荐的选择时，这很有用。

您也可以绑定到对象而不是普通字符串。例如：

在这里， ValueExpr和DisplayExpr属性确保小部件知道该字段用于该值以及向用户显示的字段。

以编程方式更改选定的项目

有时，您不希望RadioGroup仅显示默认值。您可能需要以后更改选定的选项，也许在用户完成表单中的另一个步骤或从API返回数据之后。

在Devextreme中，这是通过更新radiogroup的值属性来完成的。如果使用jQuery创建了小部件，则可以调用选项（）在运行时更改它。

例子：

当选项（“ value”，…）呼叫运行时，放射线群会立即突出显示“ premium”。这在角度，反应和vue中也起作用 - 在这些框架中，通常将值绑定到状态或变量。当该状态更改时，所选项目会自动更新。

此方法对选择取决于其他输入的表格有帮助。例如，如果用户选择“业务帐户”，则可以自动将放射线设置为“年度计划”，而不是“每月计划”。

处理onvaluechanged活动

设定价值是故事的一面。捕获用户互动是另一个。 Devextreme中的valuechanged事件可让您在用户更改其选择时做出反应。

这是一个简单的例子：

每当用户选择不同的计划时，控制台都会打印新值。当您想更新页面的其他部分或将选择回到数据库时，此事件是关键。

在框架中，这种情况以相同的方式工作，但遵循其事件模型。例如，在React中，您可以使用状态并传递当放射线变化时发射的处理程序函数。在Angular或Vue中，您可以直接与双向数据绑定结合，并使用事件输出来跟踪更改。

将Onvaluechang视为您的“听众”。它将用户操作连接到您的业务逻辑 - 例如显示不同的价格，启用按钮或调整相关字段。没有它，放射线群只能显示选项，而不会让您的其余应用知道用户选择的内容。

特定于框架的例子

Devextreme在许多框架上工作，并且在各处设置所选的radiogroup值几乎相同，但是语法会有所改变。

1。角示例：

在Angular中，通常将值绑定到组件属性。

<dx-radio group
[项目] =“ ['basic'，'标准'，'premium']”
[（value）] =“ Selected Plans”>
</dx-radio-group>

在这里，在您的打字稿文件控件中选择selectedPlan哪个项目。如果更改selectedPlan ，则radiogroup会立即更新。

2。反应示例：

React使用受控组件，因此您可以使用状态处理选择。

当用户选择不同的计划时， setPlan会更新状态，而RadioGroup显示了新的选择。

3。vue示例：

VUE使v-model变得容易。

在您的VUE数据中更改selectedPlan会立即更新放射线。

4。示例：

jQuery很简单，因为您只需创建一个实例并设置值即可。

解决常见问题

即使使用简单的小部件，事情也会出错。这是开发人员面临的最常见问题：

• 值不更新：通常，当您设置的值与数据源中的valueExpr匹配时，通常会发生。例如，如果您的数据源使用id ，但是您尝试设置文本，则没有任何更改。
• 多种形式的多个放射线：如果您对两个小部件使用相同的数据绑定，则它们可以互相干扰。始终为每个组使用唯一的绑定或单独的状态。
• 样式或布局问题：有时radiogroup在表单或网格中看起来不正确。确保容器具有足够的空间，并且CSS不会超过Devextreme的样式。

这些问题中的大多数归结为不匹配的值或缺少绑定。检查您的value ， valueExpr和dataSource通常会解决它们。

结论

Devextreme中的Radiogroup小部件是一个简单但重要的工具。您使用值属性来设置默认值，选项（“ value”）以稍后更改它，并onvaluechangang捕获用户操作。在Angular，React，Vue或JQuery中，该方法是相同的 - 正确绑定值并起作用。

如果没有更新的内容，请检查您的数据绑定，并确保该值与您的数据源匹配。一旦将其设置为正确，放射线将成为一种平稳的方式，可以指导用户做出所需的选择。