ステップバイステップ：Devextremeラジオグループの選択オプションを設定する方法

DevexpressによるDevextremeは、Webアプリ用のすぐに使用できるUIコンポーネントが満載のライブラリです。 Angular、React、Vue、さらにはjQueryで動作します。人気のあるウィジェットの1つはRadiogroupです。これにより、ユーザーはリストから1つのオプションを選択できます。

フォーム、設定ページ、またはダッシュボードでは、RADIOGROUPは、ユーザーが1つの回答のみを選択するようにガイドするのに役立ちます。たとえば、「毎月の計画」と「毎年の計画」を選択させることができます。アプリをスムーズに感じるために、開発者はデフォルトの選択肢を設定するか、値を事前に選択したいことがよくあります。それが、RadiogroupのValueプロパティが登場する場所です。

Devextreme Radiogroupとは何ですか？

Radiogroupウィジェットは、シンプルだが強力な入力コントロールです。データソース（配列やJSONリストなど）が必要で、各アイテムのラジオボタンが表示されます。その後、ユーザーはクリックして1つを選択できます。複数のアイテムを選択できるチェックボックスグループとは異なり、Radiogroupは一度に1つの選択肢しか許可しません。

開発者は通常、選択されたアイテムとは何か、それを正しく設定する方法という2つのことを気にします。ウィジェットは、Valueプロパティを介して現在の選択肢を追跡します。このプロパティを変更すると、選択したアイテムが更新されます。これは、ウィジェットが同じAPIに続くため、Angular、React、Vue、およびJQueryなどのすべてのフレームワークで機能します。

Radiogroupでデフォルトの選択された値を設定します

デフォルトの選択された値の設定は、ウィジェットを初期化するときに値オプションを使用して実行されます。データソース内のアイテムの1つに一致する値を渡し、そのアイテムが事前に選択されたものとして表示されます。

JSON DataSourceを使用してPlain JavaScriptを使用した簡単な例を次に示します。

$（“＃radiogroupcontainer”）。dxradiogroup（{
アイテム：[「基本」、「標準」、「プレミアム」]、
値：「標準」//デフォルトが選択されています
}）;

この例では、ページが読み込まれると「標準」オプションが既に選択されます。これは、最も一般的または推奨される選択肢にユーザーをガイドしたい場合に役立ちます。

また、プレーンな文字列の代わりにオブジェクトにバインドすることもできます。例えば：

ここで、 ValueExprおよびDisplayExprプロパティは、ウィジェットがユーザーに表示する値と表示するフィールドを知っていることを確認します。

選択したアイテムをプログラム的に変更します

Radiogroupにデフォルト値を表示するだけではない場合があります。選択したオプションを後で変更する必要がある場合があります。ユーザーがフォームの別のステップを完了した後、またはデータがAPIから戻ってきたときです。

devextremeでは、これは放射層の値プロパティを更新することによって行われます。 jQueryでウィジェットを作成した場合、実行時にオプション（）を呼び出して変更できます。

例：

オプション（「値」、…）コールが実行されると、Radiogroupは即座に「プレミアム」を強調します。これはAngular、React、およびVueでも機能します。これらのフレームワークでは、通常、値を状態または変数に結合します。その状態が変更されると、選択したアイテムが自動的に更新されます。

このアプローチは、選択が他の入力に依存するフォームに役立ちます。たとえば、ユーザーが「ビジネスアカウント」を選択した場合、Radiogroupを「毎月の計画」ではなく「年間計画」に自動的に設定することができます。

onvaluueChangedイベントの処理

値を設定することは、ストーリーの片側です。キャプチャユーザーインタラクションはもう一方です。 devextremeでのbaluueChangedイベントにより、ユーザーが選択を変更するたびに反応することができます。

これが簡単な例です：

ユーザーが別のプランを選択するたびに、コンソールは新しい値を印刷します。このイベントは、ページの他の部分を更新するか、選択をデータベースに送り返す場合に重要です。

フレームワークでは、これは同じように機能しますが、イベントモデルに従います。たとえば、Reactでは、Radiogroupが変更されたときに発射するハンドラー関数を使用して渡すことができます。 AngularまたはVueでは、双方向のデータバインディングで直接バインドし、イベント出力を使用して変更を追跡できます。

onvaluueChangedはあなたの「リスナー」と考えてください。ユーザーのアクションをビジネスロジックに接続します。これは、異なる価格を表示したり、ボタンを有効にしたり、関連フィールドを調整したりします。それがなければ、Radiogroupは、アプリの残りの部分にユーザーが選択したものを知らせることなく、オプションのみを表示します。

フレームワーク固有の例

Devextremeは多くのフレームワークで動作し、選択した放射層値を設定することはどこでもほぼ同じですが、構文は少し変わります。

1。角の例：

Angularでは、通常、値をコンポーネントプロパティに結合します。

<dx-radio-group
[items] =” ['Basic'、 'Standard'、 'Premium']」
[（value）] =” SelectedPlan”>
</dx-radio-group>

ここで、TypeScriptファイルのselectedPlan選択したアイテムを制御します。 selectedPlan変更すると、Radiogroupはすぐに更新されます。

2。反応例：

Reactは制御されたコンポーネントを使用するため、Stateで選択を処理します。

ユーザーが別のプランを選択すると、 setPlan状態を更新し、Radiogroupに新しい選択が表示されます。

3。Vueの例：

Vueはv-modelで簡単になります。

VUEデータでselectedPlan変更すると、Radiogroupが即座に更新されます。

4。JQueryの例：

jQueryは、インスタンスを作成して値を設定するだけなので、簡単です。

一般的な問題のトラブルシューティング

シンプルなウィジェットであっても、物事がうまくいかない可能性があります。開発者が直面する最も一般的な問題は次のとおりです。

• 値が更新されない：これは通常、設定した値がDataSourceのvalueExprと一致しない場合に発生します。たとえば、DataSourceがidを使用しているが、代わりにテキストを設定しようとする場合、何も変更されません。
• 1つの形式の複数の放射グループ： 2つのウィジェットに同じデータバインディングを使用すると、互いに干渉する可能性があります。常にグループごとに一意のバインディングまたは個別の状態を使用してください。
• スタイリングまたはレイアウトの問題：ラジオグループがフォームやグリッド内で正しく見えない場合があります。コンテナに十分なスペースがあり、CSSがDevextremeのスタイルを無効にしていないことを確認してください。

これらの問題のほとんどは、値の不一致またはバインディングの欠落にかかっています。通常、 value 、およびdataSource valueExpr確認すると、通常は解決します。

結論

DevextremeのRadiogroupウィジェットは、シンプルだが重要なツールです。 Valueプロパティを使用してデフォルトのオプション（「値」）を設定して後で変更し、ユーザーアクションをキャプチャするためにbalueChangedを変更しました。 Angular、React、Vue、またはJQueryでは、この方法は同じです。値を正しく結合し、機能します。

何かが更新されていない場合は、データバインディングを確認し、値がデータソースと一致することを確認してください。それを正しく設定すると、Radiogroupはユーザーが必要な選択をするように導くスムーズな方法になります。