react 图片修改增加回显

如果图片地址已经存在数据库，在取到数据的时候就能直接IP加上图片路径就能访问。

renderContent = (data) => {
          return data.map((item, index) => {
              return (
                  <Col xxs="24" s="12" l="8" key={index}>
                      <div key={index} style={styles.columnCardItem}>
                          <div style={styles.cardBody}>
                              <div style={styles.avatarWrapper}>
                                  <Img
                                      shape="rounded"
                                      src={"http://192.168.1.106:8080/" + item.imgaddr}
                                  />
                              </div>
                              <p style={styles.title}>{item.name}</p>
                              <p style={styles.desc}>{item.description}</p>
                          </div>

                          <div style={styles.downloadButtons}>
                            <span>
                                  <EditProduct
                                      index={index}
                                      record={item}
                                      getFormValues={this.getFormValues}
                                  />
                                  <DeleteProduct
                                      handleRemove={() => this.handleRemove(index)}
                                  />
                             </span>
                          </div>
                      </div>
                  </Col>
              );
          });

  };

增加和编辑的图片上传到数据的方式就是将图片途径取到并存到数据库中去。
首先从父组件获得图片的路径
values.imgaddr = this.state.imgurl；
定义getimg（）方法获得图片路径

    console.log("addproduct++++++getImg dataUrl: " + JSON.stringify(imgurl));
    this.setState({
        imgurl:imgurl
    });
  };```
之后将父组件获得的图片路径放到FormItem组件中即可
``` <FormItem label="图片：" {...formItemLayout}>
                  <CropUploadImage
                      btnvalue = {"增加图片"}
                      getImg={this.getImg}
                  />
              </FormItem>```