React コンボボックスの機能

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

    コンボボックス機能の例

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

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

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

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

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

    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;
};

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

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

    機能

    フィルタリング

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

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

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

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

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

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

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

comboRef.current.filteringOptions = options;

    グループ化

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

    <IgrCombo groupKey="region" />

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

    ソートの方向

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

    <IgrCombo groupSorting="desc" />

    ラベル

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

    <IgrCombo label="Cities" />

    プレースホルダー

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

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

    オートフォーカス

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

    <IgrCombo autofocus="true" />

    検索入力のフォーカス

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

    <IgrCombo autofocusList="true" />

    必須

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

    <IgrCombo required="true" />

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

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

    <IgrCombo disabled="true" />

    その他のリソース