React Modal始终使用一行中的相同记录

Posted 2021-04-29

所以我有一个表显示来自API调用的多个作业。每个表行都有一个按钮，用于打开引导程序模式，显示有关该作业的更多信息。

我的问题是，所单击的行的模式似乎没有打开。它总是打开特定的行（具有最低ID的行）。有人知道我在做什么错吗？ModalComponent

render() {
  console.log("job: ", this.props.id)
  return (
    <div className="container">
      <ReactBootstrap.Modal
        {...this.props}
        size="lg"
        aria-labelledby="contained-modal-title-vcenter"
        centered
      >
        <ReactBootstrap.Modal.Header closeButton>
          <ReactBootstrap.Modal.Title id="contained-modal-title-vcenter">
            {this.props.title}
            {this.props.employer}
          </ReactBootstrap.Modal.Title>
        </ReactBootstrap.Modal.Header>
        <ReactBootstrap.Modal.Body>
          <h4>Would you like to apply to this job?</h4>
          <p>{this.props.description}</p>
        </ReactBootstrap.Modal.Body>
        <ReactBootstrap.Modal.Footer>
          <button className="btn btn-primary" onClick={this.applyJob}>Apply</button>
          <button className="btn btn-warning" onClick={this.props.onHide}>Close</button>
        </ReactBootstrap.Modal.Footer>
      </ReactBootstrap.Modal>
    </div>
  )
}

console.log吐出表中每一行的ID。

我的TableComponent将每个作业的作业详细信息传递到ModalComponent中，如下所示：TableComponent

<tbody>
  {
    this.props.response.map(    //  map allows you to loop around items
      job =>  //  a key is used to identify a row
        <tr key={job.id}>
          <td>{job.employer}</td>
          <td>{job.jobTitle}</td>
          <td>{job.county}</td>
          {/* <td>{job.applied + ''}</td> */}
          <td>
            {this.checkApplied(job.applied)}
          </td>
          <td><button className="btn btn-info" onClick={() => this.setState({ addModalShow: true })}>Info</button></td>
          <ApplyComponent
            show={this.state.addModalShow}
            onHide={addModalClose}
            id={job.id}
            title={job.jobTitle}
            employer={job.employer}
            county={job.county}
            description={job.description}
            status={job.applied}
          />
        </tr>
    )
  }
</tbody>

以下是表格和模式的图像：

如您所见，即使单击第一行，下一行的详细信息仍将显示在模式中。

答案

问题

您正在映射多个项目，每个项目都有各自的模式。这些模态中的每一个都可以通过show道具来确定是打开还是关闭。

[每个映射元素的show属性设置为this.state.addModalShow。

结果

每个模态将同时打开和关闭，因为它们基于相同的状态值。单击任何一项将导致全部打开或关闭。

可见的结果是，您将始终看到最后一个模态为开放模态，因为它是最后一个渲染且将位于顶部。

解决方案

这里是一种需要最少更改的解决方案：

为每个项目使用不同的状态值。

this.props.response.map(
  job =>
    <tr key={job.id}>
      <td>{job.employer}</td>
      <td>{job.jobTitle}</td>
      <td>{job.county}</td>
      {/* <td>{job.applied + ''}</td> */}
      <td>
        {this.checkApplied(job.applied)}
      </td>
      <td>
      <button 
        className="btn btn-info" 
        onClick={() => {
      // Use a computed property name to make it unique based on the ID
          this.setState({ ['show_'+job.id]: true })
        }
      >Info</button></td>
      <ApplyComponent
        show={this.state['show_'+job.id]} // Use the same state value as the prop
        onHide={addModalClose}
        id={job.id}
        title={job.jobTitle}
        employer={job.employer}
        county={job.county}
        description={job.description}
        status={job.applied}
      />
    </tr>
)