DaisyUI Reactについて

yosi2024/08/26 5:50

https://react.daisyui.com/?path=/story/data-display-accordion--default

yosi2024/08/26 5:51

react-daisyUIでボタンを押したときにAccordionの開閉を行うコードを示してください。

Answerer AIPowered by gpt-3.5-turbo

以下は、react-daisyUIを使用してボタンを押した際にAccordionの開閉を行うコードの例です。

import React, { useState } from "react";
import { Accordion, AccordionItem, AccordionButton, AccordionPanel } from "react-daisyui";

export default function MyAccordion() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button
        className="btn btn-primary"
        onClick={() => setOpen(!open)}
      >
        ボタン
      </button>

      <Accordion activeKey={open ? "1" : ""}>
        <AccordionItem>
          <AccordionButton>アコーディオンのタイトル</AccordionButton>
          <AccordionPanel>アコーディオンの内容</AccordionPanel>
        </AccordionItem>
      </Accordion>
    </div>
  );
}

このコードでは、openという状態変数を使ってボタンのクリックに応じてAccordionの開閉を制御しています。ボタンのクリックイベントでopenの値を反転させることで開閉を切り替えます。Accordionコンポーネントを使用して、アコーディオンの表示/非表示を制御しています。AccordionItemコンポーネント内にAccordionButtonとAccordionPanelを配置し、それぞれの内容を設定します。AccordionコンポーネントのactiveKeyプロパティには、開いているアコーディオンのキーを指定します。openがtrueの場合は"1"を設定し、それ以外の場合は空文字列を指定しています。

yosi2024/08/26 6:18

activeKeyという要素はそんざいしません。

Answerer AIPowered by gpt-3.5-turbo

申し訳ありません、react-daisyUIではAccordionコンポーネント内にactiveKeyプロパティは存在しませんでした。

代わりに、useStateフックを使用してアコーディオンの開閉状態を管理し、条件に応じてAccordionItemのactiveプロパティを設定する方法を使用できます。

以下に修正した例を示します。

import React, { useState } from "react";
import { Accordion, AccordionItem, AccordionButton, AccordionPanel } from "react-daisyui";

export default function MyAccordion() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button
        className="btn btn-primary"
        onClick={() => setOpen(!open)}
      >
        ボタン
      </button>

      <Accordion alwaysOpen={open}>
        <AccordionItem>
          <AccordionButton>アコーディオンのタイトル</AccordionButton>
          <AccordionPanel>アコーディオンの内容</AccordionPanel>
        </AccordionItem>
      </Accordion>
    </div>
  );
}

この例では、alwaysOpenプロパティを使用して、openの値に基づいてアコーディオンの開閉を切り替えます。openがtrueの場合は常に開いた状態にし、falseの場合は閉じた状態にします。AccordionItemコンポーネントはalwaysOpenプロパティの影響を受けます。

yosi2024/08/26 6:20

もちろんalwaysOpenなんて要素も無く、パッと調べてもわからなかった。

コメントするにはログインが必要です

yosi