Javascript React引导在使用贴图功能渲染时只打开一个折叠/在每个折叠中显示相关信息

我试图在单击名为“查看任务”的按钮后为用户显示相关任务。我现在遇到的问题是，当我单击此按钮时，所有React引导折叠组件都会打开，显示的任务会显示在“所有用户”下，但它应该只显示给一个特定用户。我用一个映射函数渲染所有这些

我需要一次打开一个折叠，但由于我使用贴图进行渲染，所以onClick函数对于创建的每个折叠都是相同的，因此这会触发所有折叠打开，我如何做到一次只打开一个折叠，在单击另一个“查看任务”按钮时关闭一个折叠

另外，我如何才能这样做，使相关任务显示在我为其单击“查看任务”的特定用户下，而不是显示在“所有人”下

//项目组成部分

 constructor(props) {
    super(props);

    this.state = {}

    this.handleJoin = this.handleJoin.bind(this);
    this.open = this.open.bind(this);
    this.openCollapse = this.openCollapse.bind(this);
  }
  openCollapse(event) {
    this.setState({open: !this.state.open})

    var projectID = this.props.router.params.id;
    var userID = event.target.getAttribute('data-memberID');

    this.props.populateTasks(projectID, userID)
  }

  teamMems = members.map((members, i) =>
        <div key={i} className='container'>
          <h4>{members.username}</h4>
          <Button bsStyle="success" data-memberID={members._id} onClick={this.openCollapse}>View Tasks</Button>
          <Collapse in={this.state.open}>
            <div>
              <Well>
              { this.props.userTasks 

                ?

                this.props.userTasks.map((task, i) => 
                  <p key={i}>{task.task.toString()}</p>
                )

                :

                nothing
              }
              </Well>
            </div>
          </Collapse>

---

正如我所说的，为其

任务

或使用

按钮

切换的

团队成员

保留一个具有

折叠

状态的单独组件。像这样的

class TeamMember extends Component {
  constructor(props);
  this.state = {
    open: false //collapse state for this member
  }
  render(){
    <div>
      <YourButton with onClick={someStateChangingMethod} />
      <YourMemberContent />
    </div>
  }
}

---

希望这能有所帮助。

为每个用户创建单独的

折叠

状态你是什么意思？你是说

这个.state.open

？如何为每次折叠创建不同的折叠/使其动态化。在我的构造函数中，我将状态设置为

this.state={}

问题是onClick函数设置了

打开

状态，这会影响所有的

处于=这个状态。在collapse中打开

我的意思是为每个

团队成员

保留一个独立的独立组件，每个

团队成员都有自己的
状态
用于
折叠
我不确定我完全明白你的意思，所以我要通过在TeamMember组件中，使用redux中的道具和成员信息，但在组件本身中，您在哪里使用这些道具。我是否要将它们再次传递给YourMemberContent组件？是的，您需要传递每个团队成员的数据好的，而不是将所有成员信息放在另一个组件中我只是将按钮和折叠部分放在另一个组件中，效果非常好。谢谢你的提示
class TeamMember extends Component {
  constructor(props);
  this.state = {
    open: false //collapse state for this member
  }
  render(){
    <div>
      <YourButton with onClick={someStateChangingMethod} />
      <YourMemberContent />
    </div>
  }
}

teamMems = members.map((member, i) => (
  <TeamMember key={i} {...this.props} member={member}>
)