Javascript 如何在引导式手风琴中切换正负

我正在使用

react bootstrap

操作

Accordion

我已经成功创建了Accordion，现在我想在打开时为每个标题提供切换，如加减，关闭时显示加号，但我无法处理该事件

我所做的

import React from "react";
import "./styles.css";
import { Accordion, Card } from "react-bootstrap";

const App = () => {
  const data = [
    { name: "mike", age: 22 },
    { name: "clive", age: 25 },
    { name: "morgan", age: 82 }
  ];
  return (
    <div className="App">
      <Accordion defaultActiveKey="0">
        {data.map((item, index) => (
          <Card>
            <Accordion.Toggle as={Card.Header} eventKey={index}>
              {item.name}
            </Accordion.Toggle>
            <Accordion.Collapse eventKey={index}>
              <Card.Body>{item.age}</Card.Body>
            </Accordion.Collapse>
          </Card>
        ))}
      </Accordion>
    </div>
  );
};
export default App;

从“React”导入React；
导入“/styles.css”；
从“react bootstrap”导入{Accordion，Card}；
常量应用=（）=>{
常数数据=[
{姓名：“迈克”，年龄：22}，
{姓名：“克莱夫”，年龄：25}，
{姓名：“摩根”，年龄：82}
];
返回(

您只需使用自定义
onclick
事件创建自定义，还可以使用
useState
处理设置
+
/
-
符号的切换事件：

以下是一个片段：

import React，{useState}来自“React”；
导入“/styles.css”；
从“react bootstrap”导入{Accordion，Card，UseAcordionttoggle}；
函数CustomToggle（{children，eventKey，handleClick}）{
const decoratedOnClick=useAccordionToggle（事件键，（）=>{
handleClick（）；
});
返回(
{儿童}
);
}
常量应用=（）=>{
const[activeKey，setActiveKey]=useState（0）；
常数数据=[
{姓名：“迈克”，年龄：22}，
{姓名：“克莱夫”，年龄：25}，
{姓名：“摩根”，年龄：82}
];
返回(
{data.map（（项目，索引）=>(
{
如果（activeKey==索引）{
setActiveKey（空）；
}否则{
设置活动键（索引）；
}
}}
>
{item.name}
{activeKey==索引？-“：“+”}
{item.age}
))}
);
};
导出默认应用程序；
它已经在那里了，但你看，嘿，我用
激活第一个，但它显示+，第一个总是打开的，所以它应该显示-我用这个
来显示上下我更新了我的代码片段，请检查，还有图标，我将把它留给你，因为它应该像用t替换sings-/+一样简单ag和类名，如果您觉得我的答案对您有用，请接受作为答案。好的，让我检查一下
import React, { useState } from "react";
import "./styles.css";
import { Accordion, Card, useAccordionToggle } from "react-bootstrap";

function CustomToggle({ children, eventKey, handleClick }) {
  const decoratedOnClick = useAccordionToggle(eventKey, () => {
    handleClick();
  });

  return (
    <div className="card-header" type="button" onClick={decoratedOnClick}>
      {children}
    </div>
  );
}

const App = () => {
  const [activeKey, setActiveKey] = useState(0);

  const data = [
    { name: "mike", age: 22 },
    { name: "clive", age: 25 },
    { name: "morgan", age: 82 }
  ];
  return (
    <div className="App">
      <Accordion defaultActiveKey={0} activeKey={activeKey}>
        {data.map((item, index) => (
          <Card key={index}>
            <CustomToggle
              as={Card.Header}
              eventKey={index}
              handleClick={() => {
                if (activeKey === index) {
                  setActiveKey(null);
                } else {
                  setActiveKey(index);
                }
              }}
            >
              {item.name}
              {activeKey === index ? "-" : "+"}
            </CustomToggle>
            <Accordion.Collapse eventKey={index}>
              <Card.Body>{item.age}</Card.Body>
            </Accordion.Collapse>
          </Card>
        ))}
      </Accordion>
    </div>
  );
};
export default App;