我有一个图标，可以切换以关闭选项卡
<img src={upArrow} alt="" onClick={() => setCloseTabToggle(!closeTabToggle)} />
它的状态：
const [closeTabToggle, setCloseTabToggle] = useState(false)
触发css：
<Form.Group className={closeTabToggle ? `closed-tab-true` : ''}>
现在使用一个图标就可以了，但是如果我有多个图标怎么办？类似于thisjquery
您可以存储一组布尔值，而不是在 closeTabToggle 中存储单个布尔值。
const [toggleArray, setToggleArray] = useState([false, false, false]);
每个布尔值都可以对应于您的每个可点击图标。如果您的所有图标都是相同的组件，您可以映射到 toggleArray 并为每个项目渲染一个图标。
{toggleArray.map((item, i) => (
<img key={i} src={upArrow} alt="" onClick={() => {
handleIconClick(i);
}} />
))}
handleIconClick 看起来像这样：
const handleIconClick = (i) => {
const temp = [...toggleArray];
temp[i] = !temp[i];
setToggleArray(temp);
};
因此，单击图标将更改与 toggleArray 中具有相同索引的相应布尔值。
最后，更改 Form.Group 元素的 classNames。
<Form.Group className={toggleArray[0] ? `closed-tab-true` : ''}/>
<Form.Group className={toggleArray[1] ? `closed-tab-true` : ''}/>
<Form.Group className={toggleArray[2] ? `closed-tab-true` : ''}/>
如果要处理具有不同图像的多个选项卡，最简单的方法
const [tab, setTab] = useState(1)
为每个选项卡设置唯一 id
<img src={upArrow} alt="" onClick={()=>setTab(1)} />
<img src={upArrow} alt="" onClick={()=>setTab(2)} />
<img src={upArrow} alt="" onClick={()=>setTab(3)} />
然后根据您的 css 隐藏和显示
<Form.Group className={tab===1 ? `d-block` : 'd-none'}>One</Form.Group>
<Form.Group className={tab===2 ? `d-block` : 'd-none'}>two</Form.Group>
<Form.Group className={tab===3 ? `d-block` : 'd-none'}>three</Form.Group>