React 単一選択 ComboBox

React ComboBox は、単一選択モードと、メインの入力プロンプトを介した項目リストのクイックフィルタリングをサポートしています。ユーザーは、数文字タイプすることで、オプションのリストに探している項目を表示できます。Enter キーを押すと、最初にハイライト表示された一致が選択されます。

React 単一選択の例

単一選択とクイックフィルタリングを有効にするには、ComboBox コンポーネントで singleSelect プロパティを設定します。ユーザーエクスペリエンスとキーボードナビゲーションはほとんど変わりませんが、オプションリストの上にある特別なフィルターボックスに検索クエリを入力する代わりに、メインの入力ボックスが使用されます。

<IgrCombo singleSelect></IgrCombo>
tsx

interface City {
  id: string;
  name: string;
  country: string;
}

export const Cities: City[] = [
  { name: "London", id: "UK01", country: "UK" },
  { name: "Manchester", id: "UK02", country: "UK" },
  { name: "Birmingham", id: "UK03", country: "UK" },
  { name: "Glasgow", id: "UK04", country: "UK" },
  { name: "Liverpool", id: "UK05", country: "UK" },
  { name: "New York", id: "US01", country: "USA" },
  { name: "Miami", id: "US02", country: "USA" },
  { name: "Philadelphia", id: "US03", country: "USA" },
  { name: "Chicago", id: "US04", country: "USA" },
  { name: "Springfield", id: "US05", country: "USA" },
  { name: "Los Angeles", id: "US06", country: "USA" },
  { name: "Houston", id: "US07", country: "USA" },
  { name: "Phoenix", id: "US08", country: "USA" },
  { name: "San Diego", id: "US09", country: "USA" },
  { name: "Dallas", id: "US010", country: "USA" },
  { name: "Sofia", id: "BG01", country: "Bulgaria" },
  { name: "Plovdiv", id: "BG02", country: "Bulgaria" },
  { name: "Varna", id: "BG03", country: "Bulgaria" },
  { name: "Burgas", id: "BG04", country: "Bulgaria" },
  { name: "Rome", id: "IT01", country: "Italy" },
  { name: "Milan", id: "IT02", country: "Italy" },
  { name: "Naples", id: "IT03", country: "Italy" },
  { name: "Turin", id: "IT04", country: "Italy" },
  { name: "Palermo", id: "IT05", country: "Italy" },
  { name: "Florence", id: "IT06", country: "Italy" },
];
ts

import React, { useRef } from "react";
import ReactDOM from "react-dom/client";
import { IgrComboModule, IgrCombo, IgrSwitchModule, IgrSwitch } from "@infragistics/igniteui-react";
import "./index.css";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import { Cities } from "./ComboData";

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

export default function ComboSingleSelection() {
  const comboRef = useRef<IgrCombo>(null);

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

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

  return (
    <div className="sample">
      <IgrCombo
        valueKey="id"
        displayKey="name"
        label="Cities"
        placeholder="Pick a city"
        singleSelect
        data={Cities}
        ref={comboRef}
      ></IgrCombo>
      <div className="options">
        <IgrSwitch change={enableGrouping}>
          <span key="grouping">Enable Grouping</span>
        </IgrSwitch>
        <IgrSwitch change={disableCombo}>
          <span key="disabled">Disable Combo</span>
        </IgrSwitch>
      </div>
    </div>
  );
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<ComboSingleSelection />);
tsx

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

.options {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  gap: 8px;
}
css

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

選択 API

singleSelect プロパティが適用された ComboBox の選択 API はほとんど同じままですが、このプロパティが設定されていない ComboBox と比べて重要な違いがいくつかあります。

主な違いは、一度に 1 つの項目しか選択できないことです。たとえば、コンボコンポーネントに valueKey を指定した場合、複数の項目を select/deselect メソッドに渡しても効果はありません。これは、以前に選択した項目が、新しい選択を行うと自動的に選択解除されることも意味します。

単一の選択コンボでプログラムによって項目を選択 / 選択解除する方法は次のとおりです。

項目の選択:

// select the item matching the 'BG01' value of the value key field.
comboRef.current.select('BG01');
tsx

新たに選択せずに項目の選択を解除するには、deselect メソッドを呼び出します。

項目の選択解除:

// deselect the item matching the 'BG01' value of the value key field.
comboRef.current.deselect('BG01');
tsx

無効な機能

当然のことながら、一部の構成オプションは単一選択 ComboBox では効果がありません。

プレースホルダー

placeholderSearch プロパティに値を割り当てても結果は得られません。これは、通常、オプションのリストの上に配置されるフィルター入力が単一の選択 ComboBox に存在しないためです。

オプションリストのオートフォーカス

単一選択 ComboBox に autofocusList オプションを設定しても効果はありません。

キーボードナビゲーション

キーボードナビゲーションは、非単一選択 ComboBox と同じように動作しますが、メイン入力がフィルタリングプロンプトの役割を果たし、フィルタリング / 検索入力に適用されるすべてのキーボードアクションがメイン入力プロンプトに移動される点が異なります。

その他の機能

他のすべての機能は、非単一選択 ComboBox コンポーネントと同じように動作します。

API リファレンス

IgrCombo