使用 react-bootstrap 中的地图正确渲染多个模态

Question

我正在尝试使用地图渲染多个 react-bootsrap 模态，但我无法这样做。使用我当前的代码，单击“查看详细信息”按钮会同时激活所有模态，而不是打开相关的模态。这是我与模态相关的代码片段：

  render() {
    const { accounts } = this.props;
    const displayAccounts = Object.keys(accounts).filter(key => {
      return accounts[key].info.type === 'student'
    }).map(key => {
      return (
        <tr key={key}>
          <th>{accounts[key].info.name}</th>
          <td>{accounts[key].info.email}</td>
          <td><Button bsStyle='danger' onClick={() => this.props.removeAccount(key)}>Remove Account</Button></td>
          <td>
            <ButtonToolbar>
              <Button id={key} bsStyle="primary" onClick={this.showModal}>View Details</Button>
              <Modal
                id={key}
                show={this.state.show}
                onHide={this.hideModal}
              >
                <Modal.Header closeButton>
                  <Modal.Title>Student Details</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                  <Table responsive striped hover>
                    <thead>
                      <tr>
                        <th>Title</th>
                        <th>Details</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th>Name</th>
                        <td>{accounts[key].userDetails.name}</td>
                      </tr>
                      <tr>
                        <th>Education</th>
                        <td>{accounts[key].userDetails.education}</td>
                      </tr>
                      <tr>
                        <th>GPA</th>
                        <td>{accounts[key].userDetails.gpa}</td>
                      </tr>
                      <tr>
                        <th>Skills</th>
                        <td>{accounts[key].userDetails.skills}</td>
                      </tr>
                      <tr>
                        <th>Overview</th>
                        <td>{accounts[key].userDetails.skills}</td>
                      </tr>
                    </tbody>
                  </Table>
                </Modal.Body>
                <Modal.Footer>
                  <Button onClick={this.hideModal}>Close</Button>
                </Modal.Footer>
              </Modal>
            </ButtonToolbar>
          </td>
        </tr>
      )
    })

Answer 1

尝试进行以下修改...

将以下更改添加到this.state您 constructor 的缓存中，以便稍后分配活动的 Modal 索引。

this.state = {
    ...,
    activeModal: null,
    ...,
}
this.clickHandler = this.clickHandler.bind(this);
this.hideModal = this.hideModal.bind(this);

添加/更改以下事件处理程序。在clickHandler接受该点击事件以及将被用于设置上述的索引activeModal片的状态。当反应看到状态改变时，它会调用render具有新状态的方法。这就是React的反应性质。

clickHandler(e, index) {
    this.setState({ activeModal: index })
}

hideModal() {
    this.setState({ activeModal: null })
}

在你的map函数中做这样的事情。注意onClick处理程序。使用箭头函数来捕获单击事件并调用您的clickHandler，这样您还可以传递其他参数（index在这种情况下）。一旦activeModal状态被调用，组件将被重新渲染，在对showprop执行时，对于适当的clicked组件将评估为 true 。

buttonArray.map((button, index) => {
    <Button id={key} bsStyle="primary" onClick={e => this.clickHandler(e, index)}>View Details</Button>
    <Modal
        id={key}
        show={this.state.activeModal === index}
        onHide={this.hideModal}
    />
} )