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，以缓存稍后要分配的有效模态索引。

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

添加/更改以下事件处理程序。 clickHandler接受click事件以及将用于设置上述activeModal状态的索引。当react看到状态发生变化时，它将使用新状态调用render方法。这是React的 Reactive 特性。

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

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

在map函数中执行类似的操作。注意onClick处理程序。使用箭头函数捕获click事件并调用clickHandler，这样您也可以传递其他参数（在这种情况下为index）。一旦调用activeModal状态，组件将被重新呈现，在对show prop进行操作时，将对适当的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}
    />
} )

使用react-bootstrap中的map正确渲染多个模式

1 个答案: