React コンボボックスの機能

    Ignite UI for React コンボボックス コンポーネントは、フィルタリングやグループ化などのいくつかの機能を公開しています。

    コンボボックス機能の例

    以下のデモは、ランタイムで有効または無効にできるいくつかの ComboBox 機能を示しています。

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    このサンプルでは、IgrSwitch コンポーネントを使用するため、コンボと一緒に登録する必要があります。

    import { IgrComboModule, IgrCombo, IgrSwitchModule, IgrSwitch  } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrComboModule.register();
IgrSwitchModule.register();
tsx

    次に、スイッチを切り替えてコンボ機能を制御できるように、すべてのスイッチ コンポーネントにイベント ハンドラーを追加します。

    const comboRef = useRef<IgrCombo>(null);
const switchCaseSensitiveRef = useRef<IgrSwitch>(null);

const disableFiltering = (switchComponent: IgrSwitch) => {
    comboRef.current.disableFiltering =
    switchCaseSensitiveRef.current.disabled = switchComponent.checked;
};

const showCaseSensitiveIcon = (switchComponent: IgrSwitch) => {
    comboRef.current.caseSensitiveIcon = switchComponent.checked;
};

const disableCombo = (switchComponent: IgrSwitch) => {
    comboRef.current.disabled = switchComponent.checked;
};
tsx

    グループ化は、groupKey プロパティを対応するデータ ソース フィールドに設定することで有効/無効になることに注意してください。

    const enableGrouping = (switchComponent: IgrSwitch) => {
    comboRef.current.groupKey = switchComponent.checked ? "country" : undefined;
};
tsx

    機能

    フィルタリング

    コンボボックスのフィルタリングがデフォルトで有効になります。無効にするには、disableFiltering プロパティを設定します。

    フィルタリング オプションは、検索の大文字と小文字の区別を有効にすることでさらに拡張できます。caseSensitiveIcon プロパティを使用して大文字と小文字を区別するアイコンをオンにすると、エンド ユーザーは大文字と小文字の区別を制御できます。

    <IgrCombo disableFiltering="true" caseSensitiveIcon="true"></IgrCombo>
tsx

    フィルタリング オプション

    Ignite UI for React ComboBox コンポーネントは、FilterKey オプションと CaseSensitive オプションの両方の構成を渡すことができるフィルター プロパティをもう 1 つ公開しています。FilterKey は、オプションのリストをフィルタリングするためにどのデータ ソース フィールドを使用する必要があるかを示します。CaseSensitive オプションは、フィルタリングで大文字と小文字を区別するかどうかを示します。

    次のコード スニペットは、名前ではなく国でデータ ソースから都市をフィルター処理する方法を示しています。また、デフォルトで大文字と小文字を区別するフィルタリングを行います。

    const options = {
    filterKey: 'country',
    caseSensitive: true
};

comboRef.current.filteringOptions = options;
tsx

    グループ化

    groupKey オプションを定義すると、キーに基づいて項目をグループ化します。

    <IgrCombo groupKey="region" />
tsx

    groupKey プロパティは、データ ソースが複雑なオブジェクトで構成されている場合にのみ有効です。

    ソートの方向

    コンボボックス コンポーネントは、グループを昇順または降順でソートするかどうかを設定するオプションも公開します。デフォルトでは、ソート順序は、昇順に設定されています。

    <IgrCombo groupSorting="desc" />
tsx

    ラベル

    IgrCombo ラベルは、label プロパティを使用して簡単に設定できます。

    <IgrCombo label="Cities" />
tsx

    プレースホルダー

    コンボボックス コンポーネント入力とドロップダウン メニュー内に配置された検索入力の両方に、プレースホルダー テキストを指定できます。

    <IgrCombo placeholder="Pick a city" placeholderSearch="Search for a city" />
tsx

    オートフォーカス

    コンボボックスをページの読み込みに自動的にフォーカスさせたい場合は、次のコードを使用できます。

    <IgrCombo autofocus="true" />
tsx

    検索入力のフォーカス

    コンボボックスの検索入力はデフォルトでフォーカスされています。この機能を無効にしてフォーカスをオプションのリストに移動するには、以下に示すように autofocusList プロパティを使用します。

    <IgrCombo autofocusList="true" />
tsx

    必須

    required プロパティを設定することで、コンボボックスを必須としてマークできます。

    <IgrCombo required="true" />
tsx

    コンボボックスを無効にする

    disabled プロパティを使用してコンボボックスを無効にできます。

    <IgrCombo disabled="true" />
tsx
    Ignite UI for React | CTA Banner

    その他のリソース