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

Question

我试图在点击名为 "View Tasks" 的按钮后为用户显示相关任务。我现在遇到的问题是，当我单击此按钮时，所有 React Bootstrap 折叠组件都会打开，并且显示的任务会显示在所有用户下，但它应该只对一个特定用户显示。我正在用地图功能渲染所有这些。

我需要一次打开一个 Collapse，但由于我是用地图渲染的，onClick 函数对于创建的每个 Collapse 都是相同的，所以这会触发所有 Collapse 打开，我该怎么做才能做到一次只打开一个并在单击另一个“查看任务”按钮时打开一个关闭？

另外，我该怎么做才能让相关任务显示在我点击 "View Tasks" 的特定用户下，而不是显示在所有人下。

//项目组件

 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>

//populateTasks 动作创建者

export function populateTasks(projectID, userID){
    return function(dispatch){
        axios.get('/populate-tasks/' + projectID + '/' + userID).then((res) => {
            console.log("RESPONSE IN POPULATE TASKS ACTIONS", res)
            dispatch({ type: "SET_USER_TASKS", payload: res.data.task })
        })
    }
}

Answer 1

因此，正如我所说，为 TeamMember 保留一个具有 collapse 状态的单独组件，其 tasks 或切换为 button。像这样

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

然后在您的主要组件中通过 teamMems 循环创建上述组件。

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

希望对您有所帮助。

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

React Bootstrap make only one collapse open up when being rendered with a map function / display relevant information in each collapse

javascript

reactjs

react-bootstrap

redux