Question

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

在按钮内部，请注意数据目标格式是＆＃34;＃varName＆＃34;，在这种情况下，我从{＆＃39;＃＆＃39; + this.props获取varName .id}（这是一个很长的字符串，比如..＆＃34; 5a1af3a7c7f04418b44d8c0b＆＃34;）并且只是为了测试目的而使用相同的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 =＆＃34; #test＆＃34;和id =＆＃34; test＆＃34;模态适用于所有实例，但模态仅显示第一个实例的信息。

我真的很难过。：（

React，支持Modals的数据目标内部

0 个答案: