0

我有一个渲染多个实例的组件。每个元素都有一个打开模态的按钮。

请注意按钮内部的数据目标格式是“#varName”，在这种情况下，我从 {'#'+this.props.id} 获取 varName（这是一个长字符串，如..“5a1af3a7c7f04418b44d8c0b”）并使用相同的 id 作为按钮的名称，仅用于测试目的。

<button type="button" className="btn btn-primary btn-block" data-toggle="modal" data-target={'#'+this.props.id}>{this.props.id}</button>




    {/*Modal Start*/}
<div className="modal fade" id={this.props.id} role="dialog">
    <div className="modal-dialog modal-lg">
      <div className="modal-content">
        <div className="modal-header">
          <button type="button" className="close" data-dismiss="modal">&times;</button>
          <h4 className="modal-title">{this.props.name}</h4>
        </div>
        <div className="modal-body">
          <p>This is a large modal.</p>
        </div>
        <div className="modal-footer">
          <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
{/* Modal end */}

照原样运行代码将显示一个模糊屏幕，就好像数据目标和模态内的 id 不同但它们不一样。

当使用像 data-target="#test" 和 id="test" 这样的硬编码数据时，模式适用于所有实例，但模式仅显示第一个实例的信息。

我在这件事上真的很难过。:(

4

0 回答 0