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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

以下是表格和模式的图像:enter image description here

enter image description here

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

答案

问题

您正在映射多个项目,每个项目都有各自的模式。这些模态中的每一个都可以通过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>
)

以上是关于React Modal始终使用一行中的相同记录的主要内容,如果未能解决你的问题,请参考以下文章

如何使listView中的一行始终具有相同的颜色android

无法将使用 React Portal 和 Tailwind CSS 的 `@headlessui/react` 中的 `Dialog/Modal` 居中?

如何使用 React 将 Bootstrap Modal 的大小调整为自定义大小

React Native:在Modal中显示FlatList数据

React Native Modal Selector中的全屏显示

React—Modal 的确认按钮在 Form 之外,且用到onRef父调子