Skip to main content

useCsMultiCheckBoxItem

useCsMultiCheckBoxItem は、複数選択可能なチェックボックスに対応する Item を初期化するためのフックです。

シグネチャ​

useCsMultiCheckBoxItem(label, state, rule, selOpt?, readonly?): CsMultiCheckBoxItem

引数​

引数名必須型説明
label〇string入力項目のラベルを指定します。
state〇StateResult<string[]>*¹入力項目の状態変数を指定します。useInit を使用して初期化した状態変数を指定します。
rule〇StringArrayValidationRule*²入力項目のバリデーションルールを指定します。 stringArrayRuleを使用して初期化したルールを指定します。
selOptSelectOptionsチェックボックスの選択肢を指定します。selectOptions を使用して初期値を指定します。
readonlyRW.Editable | RW.Readonly入力項目が読み取り専用かどうかを指定します。RW.Editable は読み取り・書き込み可能、RW.Readonlyは読み取り専用を表す値です。デフォルトは RW.Editable です。 　

*1：StateResultは useState の戻り値を管理する型定義です。詳しくはuseInitを参照してください。

*2：StringArrayValidationRuleはstring[]型のバリデーション定義情報（必須項目かどうか、カスタムルール名など）を保持する型定義です。

返り値​

引数で定義した初期値やバリデーションルール、選択肢など、複数選択可能なチェックボックス項目に関する情報が集約された CsMultiCheckBoxItem クラスのインスタンスを返します。

使用例​

useCsView({
  interests: useCsMultiCheckBoxItem(
    "興味のある分野",
    useInit<string[]>([]),
    stringArrayRule(false),
    selectOptions(
      [
        { key: "technology", name: "テクノロジー" },
        { key: "music", name: "音楽" },
        { key: "sport", name: "スポーツ" },
        { key: "art", name: "アート" },
        { key: "movies", name: "映画" },
        { key: "reading", name: "読書" },
        { key: "travel", name: "旅行" },
        { key: "cooking", name: "料理" },
        { key: "gaming", name: "ゲーム" },
        { key: "fashion", name: "ファッション" },
        { key: "health", name: "健康" },
        { key: "education", name: "教育" },
      ],
      "key",
      "name"
    )
  ),
});