逐步：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中，該方法是相同的 - 正確綁定值並起作用。

如果沒有更新的內容，請檢查您的數據綁定，並確保該值與您的數據源匹配。一旦將其設置為正確，放射線將成為一種平穩的方式，可以指導用戶做出所需的選擇。