Question

我正在尝试使用react和antd创建一个弹出模式窗口，因此当我单击图像时，它应该以完整尺寸显示同一图像。

问题是，即使我对第一张图像使用相同的参数并且效果很好，我也无法在Modal窗口内传递 record.url 。

render: (text, record) =>
    <div>
      <img id="img1" src={'http://127.0.0.1:8887/' + record.url} onClick={this.handlePreview}/>

      <Modal visible={this.state.previewVisible} onCancel={this.handleCancel}>
          <img src={'http://127.0.0.1:8887/ZmrLMKlc.jpg' } />  // What I need
          <img src={'http://127.0.0.1:8887/' + record.url} />  // My attempt
      </Modal>
    </div>

我该怎么办？或者是否可以在render方法中声明一个变量来以这种方式获取src？

var = document.getElementById("img1").src;

Answer 1

您可以通过云实现

render: (text, record) =>{
const imgSrc = `http://127.0.0.1:8887/${record.url}`;
return(<div>
  <img id="img1" src={imgSrc} onClick={this.handlePreview}/>

  <Modal visible={this.state.previewVisible} onCancel={this.handleCancel}>
      <img src={imgSrc} />  // What I need
      <img src={'http://127.0.0.1:8887/' + record.url} />  // My attempt
  </Modal>
</div>)
}

所以我要做的是创建一个保存src的新变量，然后将其传递给image以及Modal中的image。

将参数传递给模态窗口Antd React

1 个答案: