我正在等待 Accordion
使用 react-bootstrap
我已经成功创建了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;
你可以创建一个自定义的 Accordion.Toggle#
随心所欲 onclick
事件,也可使用 useState
来处理设置的toggle事件。+
-
迹象。
这里是一个片段或 沙盒:
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;