React コンボボックスの機能

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

コンボボックス機能の例

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

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

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

次に、React の useState フックを使用して、スイッチの状態変化に応じて更新される変数を定義します。これにより、状態が追跡され、コンボボックスの入力に反映されます。

const [disableFiltering, setDisableFiltering] = useState(false);
const [caseSensitiveIcon, setCaseSensitiveIcon] = useState(false);
const [groupingEnabled, setGroupingEnabled] = useState(false);
const [comboDisabled, setComboDisabled] = useState(false);

<IgrCombo
    valueKey="id"
    displayKey="name"
    label="Cities"
    placeholder="Pick a city"
    placeholderSearch="Search for a city"
    data={Cities}
    disableFiltering={disableFiltering}
    caseSensitiveIcon={caseSensitiveIcon}
    groupKey={groupingEnabled ? "country" : undefined}
    disabled={comboDisabled}>
</IgrCombo>


<IgrSwitch checked={disableFiltering} onChange={e => setDisableFiltering(e.detail.checked)}>
    <span>Disable Filtering</span>
</IgrSwitch>
<IgrSwitch checked={caseSensitiveIcon} onChange={e => setCaseSensitiveIcon(e.detail.checked)}>
    <span>Show Case-sensitive Icon</span>
</IgrSwitch>
<IgrSwitch checked={groupingEnabled} onChange={e => setGroupingEnabled(e.detail.checked)}>
    <span>Enable Grouping</span>
</IgrSwitch>
<IgrSwitch checked={comboDisabled} onChange={e => setComboDisabled(e.detail.checked)}>
    <span>Disable Combo</span>
</IgrSwitch>

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

groupKey={groupingEnabled ? "country" : undefined}

機能

フィルタリング

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

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

<IgrCombo disableFiltering={true} caseSensitiveIcon={true}></IgrCombo>

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

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

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

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

<IgrCombo 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} />

その他のリソース

• Ignite UI for React フォーラム (英語)
• Ignite UI for React GitHub (英語)