Question

我有一个风景和肖像图像。我如何正确弹出呢？

我的弹出窗口

 <Modal
      visible={this.state.visible}
      width="600"
      height="400"
      effect="fadeInUp"
      onClickAway={() => this.closeModal()}
    >
      <div>
        <img
          src={"/img/" + this.state.LinkName}
          width="600"
          height="400"
          alt="Houston We have pb"
        />

我的想法是，我将在每个图像上添加“ land”和“ portrait”字符串。这样我就可以测试this.state.LinkName.contains("Land")然后

width = 600 and height = 400 


else width = 400 and height = 600

我该如何做出反应？

我是反应技术方面的新手。

我修改了代码：

 handleButtonClick = (e, row) => { 
    var bild = new Image();
    bild.src = "/img/" + row.original.Cert;
    //Image.getSize(bild.src, (width, height) => {this.setState({width, height})}); 
    //const {width, height} = Image.resolveAssetSource(bild.src);
    var Pos
    bild.onload = function()
    {
      Pos = bild.width > bild.height ? "Land" : "Port";        
    }  
    this.setState({ visible: true, LinkName: row.original.Cert, ThePos: Pos });   
  };

现在我得到了真实的宽度和高度。

现在的问题是，变量ThePos始终未定义。

Answer 1

您可以仅在this.state.LinkName.contains("Land")上进行测试

像这样：

 render(){
      return(
     <Modal
          visible={this.state.visible}
          width={this.state.LinkName.contains("Land")? "600" : "400"}
          height={this.state.LinkName.contains("Land")? "400" : "600"}
          effect="fadeInUp"
          onClickAway={() => this.closeModal()}
        >
          <div>
            <img
              src={"/img/" + this.state.LinkName}
              width={this.state.LinkName.contains("Land")? "600" : "400"}
              height={this.state.LinkName.contains("Land")? "400" : "600"}
              alt="Houston We have pb"
            />
     </Modal>
    )
    }

Answer 2

我找到了：

  handleButtonClick = (e, row) => { 
var bild = new Image();
bild.src = "/img/" + row.original.Cert;   
bild.onload = () =>   
this.setState({ visible: true, LinkName: row.original.Cert, ThePos: bild.width > bild.height ? "Land" : "Port" });

};

改变位置横向或纵向反应

2 个答案: