时间戳

首页 > 解决方案 > React Modal 总是使用一行中的相同记录

javascript - React Modal 总是使用一行中的相同记录

问题描述

所以我有一个表格，显示来自 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>

以下是表格和模态的图像： 在此处输入图像描述

在此处输入图像描述

如您所见，即使我单击顶行，底行的详细信息也会显示在模式中。

标签： javascriptreactjsbootstrap-4bootstrap-modalreact-bootstrap

解决方案

问题

您正在映射多个项目，每个项目都有自己的模式。这些模式中的每一个都决定了它是由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>
        {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={() => {
          // Follow the same process for closing
          this.setState({ ['show_'+job.id]: false})
        }}
        id={job.id}
        title={job.jobTitle}
        employer={job.employer}
        county={job.county}
        description={job.description}
        status={job.applied}
      />
    </tr>
)

推荐阅读