Chakra UIでチェックを入れたCheckboxの一覧をシンプルに取得する

この記事は最終更新から2年以上経過しているため、内容が古くなっている可能性があります。

Reactでチェックを入れたCheckboxの一覧を取得する方法を調べてみたのですが、実装がごちゃごちゃのサンプルコードばかりで参考になりませんでした。

現在開発しているプロジェクトでは自分が最も好きなCSSフレームワークのChakra UIを取り入れていて、Chakra UIはカスタムフックもいくつか提供しているので、今回使えそうなカスタムフックが無いか探してみたところuseCheckboxGroupというものを見つけたので実装方法をご紹介します。

公式ドキュメントはこちら

実装方法

import { Flex, Text, Stack, Checkbox, useCheckboxGroup } from "@chakra-ui/react"

const App = () => {
  const manufacturers = ["Honda", "Yamaha", "Kawasaki", "Suzuki"]
  const { getCheckboxProps, value: checkedItems } = useCheckboxGroup()

  return (
    <Flex minH="100vh" alignItems="center" justifyContent="center" flexDirection="column">
      <Stack spacing={5} direction="row">
        {manufacturers.map((manufacturer, idx) => {
          return <Checkbox key={idx} {...getCheckboxProps({ value: manufacturer })}>{manufacturer}</Checkbox>
        })}
      </Stack>
      <Text>Checked: {JSON.stringify(checkedItems)}</Text>
    </Flex>
  )
}

export default App

このようなソースを書いてみました。これを表示すると

こんな感じで国内バイクメーカーのCheckboxが羅列され、チェックを入れると変更がcheckedItemsに反映されて下のChecked:の表示が変わります。(デフォルトのvalueだと分かりにくいのでcheckedItemsにリネームしています)

チェックした順番でcheckedItemsにアイテムがプッシュされます。

余談

今話題のChatGPTにuseCheckboxGroupの使い方を尋ねてみました。

useCheckboxGroupはisCheckedなんていうプロパティーは返さないのですが、中々惜しいところまではいけてます。

ですがそんなことより、とあるSPAフレームワークで使える、とあるCSSフレームワークについてくるカスタムフックの使い方もこのようにちょこっと質問するだけでこの精度で答えられることに驚きました。

そのうち我々のようなWebエンジニアの居場所も無くなるのでしょうか。

コメント

タイトルとURLをコピーしました