使用 Bootstrap 的模态不会更新内容答案

【问题标题】：Modal using Bootstrap doesn't update content使用 Bootstrap 的模态不会更新内容
【发布时间】：2018-11-26 15:45:35
【问题描述】：

在我的应用程序中，我显示了一个包含额外信息（未显示）的项目列表以及每个项目旁边的按钮以“查看”更多信息。我想在模式中显示这些额外信息。我成功实现了模式，它以我想要的方式显示信息。

但问题是，当我单击第二个列表项的按钮时，信息没有更新，它仍然显示旧信息（第一个项目的）。我该如何解决这个问题？为什么会这样？

从另一个类调用地图函数：

 <List>
    this.props.enrolledClasses.map(enrolledClass => (
     <ClassesPeek
      title="Overview"
      enrolledClass={enrolledClass}
     />
 </List>

ClassesPeek：

      <List.Item>
      <span>{this.props.enrolledClass.name}
      <button type="button" className="ui compact primary button mt-3" data-toggle="modal" data-target="#details">
        View
      </button> 
      <div class="modal" id="details">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <center><h4 class="modal-title">{this.props.enrolledClass.name}</h4></center>
              <button type="button" className="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
              {this.props.enrolledClass.description}
            </div>
          </div>
        </div>
      </div> 
     </span>
    </List.Item>

所以在上面的代码中，当我点击第二个列表项的“查看”按钮时，模态仍然显示第一个项目的名称和描述。

【问题讨论】：

请提供无效的代码。
@ryanwebjackson 添加了代码。这些文件有（很多）其他代码。但我希望我已经提供了足够的工作。

标签： reactjs bootstrap-modal

【解决方案1】：

它将始终显示旧的，因为您没有通过将唯一键 (id) 传递给模态框来指定它应该查看哪一个。将您的代码更新为以下 sn-p 然后它将按预期工作

<List.Item>
  <span>{this.props.enrolledClass.name}
  <button type="button" className="ui compact primary button mt-3" data-toggle="modal" data-target={`#details${this.props.enrolledClass.id}`} id={`#details${this.props.enrolledClass.id}`}>
    View
  </button> 
  <div class="modal" id={`details${this.props.enrolledClass.id}`}>
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <center><h4 class="modal-title">{this.props.enrolledClass.name}</h4></center>
          <button type="button" className="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          {this.props.enrolledClass.description}
        </div>
      </div>
    </div>
  </div> 
 </span>
</List.Item>

【讨论】：

对不起，Spectrum，我错误地拒绝了您的编辑，您说的非常对...我现在已经更新了。

【解决方案2】：

我认为这种情况的主要原因是您的 JavaScript 代码在按钮单击时打开了模式。你能检查一次吗？我建议总是对这样的用例使用 ref 而不是 id。

【讨论】：