如何只切换一个 Reactstrap Collapse？

Posted 2023-03-23

【中文标题】如何只切换一个 Reactstrap Collapse？

【英文标题】：How can I toggle only one Reactstrap Collapse?

【发布时间】：2021-01-14 09:22:21

【问题描述】：

我正在开发一个列出一些 Github 用户的 Next.JS 应用程序，当我点击一个特定的用户框时，他们的框应该使用 Reactstrap 的 Collapse 切换。但是所有框都会立即切换，与单击的用户无关。我试图将他们的 onClick 事件分开，但没有成功。

这是我的前端代码：

import React,  useEffect, useState  from "react"
import  Collapse, CardBody, Card  from 'reactstrap'

export default function Users() 

  const [isOpen, setIsOpen] = useState(false);
      const toggle = (e) => 
          setIsOpen(!isOpen)
      
 return (
        <ul>
            users.map(user => (
                <li>
                    <div className="user-space">
                        <div className="closed-user">
                            <img onClick=toggle src=user.avatar_url alt=user.login id=user.login />
                            <h3 onClick=toggle className="nickName" id=user.login>user.login</h3>
                        </div>
                        <Collapse isOpen=isOpen>
                            <Card className="accordion">
                                <CardBody className="accordion-text">
                                    <label>User Name: user.name</label>
                                    <label>User Bio: user.bio</label>
                                    <label>User Location: user.location</label>
                                    <label>User Blog: user.blog </label>
                                    <label>Number of followers: user.followers</label>
                                    <label>Number of public repositories: user.public_repos</label>
                                </CardBody>
                            </Card>
                        </Collapse>
                    </div>
                </li>
            ))
        </ul>
    )

【参考方案1】：

如果您扩展所有用户卡，您可以应用您的isOpen。如果要扩展指定的用户卡。您应该知道用户正在扩展的状态：

这里只是我的例子。您可以使用use.id 代替状态index。

function Users() 
    const [index, setIndex] = useState(false);
    const toggle = (idx) => 
        setIndex(index === idx ? null : idx);
    
    return (
        <ul>
            users.map((user, idx) => (
                <li id=idx>
                    <div className="user-space">
                        <div className="closed-user">
                            <img onClick=() => toggle(idx) src=user.avatar_url alt=user.login id=user.login />
                            <h3 onClick=() => toggle(idx) className="nickName" id=user.login>user.login</h3>
                        </div>
                        <Collapse isOpen=idx === index>
                            <Card className="accordion">
                                <CardBody className="accordion-text">
                                    <label>User Name: user.name</label>
                                    <label>User Bio: user.bio</label>
                                    <label>User Location: user.location</label>
                                    <label>User Blog: user.blog </label>
                                    <label>Number of followers: user.followers</label>
                                    <label>Number of public repositories: user.public_repos</label>
                                </CardBody>
                            </Card>
                        </Collapse>
                    </div>
                </li>
            ))
        </ul>
    )