对表行做出反应以绑定（this）单击事件处理程序

Question

我有一个来自服务器的包含图像的表格行数据（为简单起见，删除了一些其他数据）。 单击图像时，会显示一个模式弹出窗口以预览加载的图像以裁剪并使用裁剪后的图像更改图像。 一切正常。

问题是，单击模态提交按钮后，该行上单击的图像应更改。 但是我发现最后一行的图像发生了变化。

我知道问题来自这条线，但我不知道如何解决它：

handleSubmit = e => {
    e.preventDefault();

    console.log(this.state.croppedImageUrl);

    this.imagetoCropt.src = this.state.croppedImageUrl;

  };

这是代码：

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Button } from "react-bootstrap";
import { Modal } from "react-bootstrap";
import ReactCrop from "react-image-crop";
import "react-image-crop/dist/ReactCrop.css";

import { my_ads } from "./component/AdsFunctions";


export default class Myads extends Component {

 constructor() {
    super();

    this.state = {
      myads : {},
      modalShow: false,
      setShow: false,
      setClose: true,
      previewImage: "/assets/loader.gif",
      src: null,
      crop: {
        unit: "%",
        width: 30,
        aspect: 5 / 4
      }
    };
  }

  handleImageOnChange = e => {
    if (e.target.files && e.target.files.length > 0) {
      const reader = new FileReader();
      reader.addEventListener("load", () =>
        this.setState({
          src: reader.result,
          modalShow: true
        })
      );
      reader.readAsDataURL(e.target.files[0]);
    }
  };

  onImageLoaded = image => {
    this.imageRef = image;
  };

  onCropComplete = crop => {
    this.makeClientCrop(crop);
  };

  onCropChange = (crop, percentCrop) => {
    this.setState({ crop });
  };

  async makeClientCrop(crop) {
    if (this.imageRef && crop.width && crop.height) {
      const croppedImageUrl = await this.getCroppedImg(
        this.imageRef,
        crop,
        "newFile.jpeg"
      );
      this.setState({ croppedImageUrl });
    }
  }

  getCroppedImg(image, crop, fileName) {
    const canvas = document.createElement("canvas");
    const scaleX = image.naturalWidth / image.width;
    const scaleY = image.naturalHeight / image.height;
    canvas.width = crop.width;
    canvas.height = crop.height;
    const ctx = canvas.getContext("2d");

    ctx.drawImage(
      image,
      crop.x * scaleX,
      crop.y * scaleY,
      crop.width * scaleX,
      crop.height * scaleY,
      0,
      0,
      crop.width,
      crop.height
    );

    return new Promise((resolve, reject) => {
      canvas.toBlob(blob => {
        if (!blob) {
          //reject(new Error('Canvas is empty'));
          console.error("Canvas is empty");
          return;
        }
        blob.name = fileName;
        window.URL.revokeObjectURL(this.fileUrl);
        this.fileUrl = window.URL.createObjectURL(blob);
        resolve(this.fileUrl);
      }, "image/jpeg");
    });
  }

  //---- modal function ------------
  handleShow = () => {
    this.setState({
      modalShow: true
    });
  };

  handleClose = () => {
    this.setState({
      modalShow: false
    });
  };

  handleImgClick = () => {
    this.refs.fileInput.click();
  };

  handleClickSubmit = () => {
    this.refs.btnSubmit.click();
    this.setState({
      modalShow: false
    });
  };

  //--------- end modal function---


//======== PROBLEM HERE ======================
   handleSubmit = e => {
    e.preventDefault();

    console.log(this.state.croppedImageUrl);

    this.imagetoCropt.src = this.state.croppedImageUrl;

  };
//=============================================

 componentDidMount() {
   // AXIOS call
    my_ads().then(res => {

        this.setState({  
          myads: res.myads,
        });
    });     
  }

  render() {

    const { crop, croppedImageUrl, src } = this.state;
    const show = this.state.modalShow;

    // My Ads List from AXIOS call 
    let myads    = this.state.myads;

     const RenderMyAds = Object.keys(myads).map((val, index) => (
        <tr className="mt-3" key={index}>
          <td>
            <div className="float-left mr-4">
              <div className="card mb-10">
                <Link to="#">
                  <img
                    className="img-thumbnail img-responsive"
                    src={myads[val].image}
                    alt="img"
                    width={200}
                    onClick={this.handleImgClick}
                    ref={ref => (this.imagetoCropt = ref)} <<==== problem here?
                  />
                </Link>
              </div>
            </div>
          </td>
        </tr>
      ));


    return (
      <div>     
        <section>
          <div className="container">
            <div className="row">
              <div className="col-lg-12">
                <div className="card">

                  <div className="card-body">
                    <div className="table-responsive">
                      <table className="table table-bordered border-top mb-0">
                        <tbody>

                           {RenderMyAds}

                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <form
          encType="multipart/form-data"
          acceptCharset="utf-8"
          onSubmit={this.handleSubmit}
        >
          <input
            type="file"
            className="d-none"
            name="userfile"
            ref="fileInput"
            onChange={this.handleImageOnChange}
          />
          <button type="submit" className="d-none" ref="btnSubmit">
            Upload Image
          </button>
        </form>


        <Modal size="lg" show={show} onHide={this.handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Image Preview</Modal.Title>
          </Modal.Header>
          <Modal.Body className="text-center"></Modal.Body>
          <ReactCrop
            src={src}
            crop={crop}
            onImageLoaded={this.onImageLoaded}
            onComplete={this.onCropComplete}
            onChange={this.onCropChange}
          />

          <img className="d-none" alt="Crop" src={croppedImageUrl} />
          <Modal.Footer>
            <Button
              variant="primary"
              className="btn-block"
              onClick={this.handleClickSubmit}
            >
              <i className="fa fa-image mr-2"></i> Upload Image
            </Button>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }
}

Answer 1

您正在覆盖 map 中的相同参考。 因此，最后一行是要映射的最后一行。 您需要改为使用一组 refs。

在您的构造函数中，添加：

this.imageRefs = [];

然后在您的映射中：

const RenderMyAds = Object.keys(myads).map((val, index) => (
    <tr className="mt-3" key={index}>
        <td>
        <div className="float-left mr-4">
            <div className="card mb-10">
            <Link to="#">
                <img
                className="img-thumbnail img-responsive"
                src={myads[val].image}
                alt="img"
                width={200}
                onClick={this.handleImgClick}
                ref={ref => (this.imageRefs[index] = ref)}
                />
            </Link>
            </div>
        </div>
        </td>
    </tr>
));

这将让您根据分配给tr的键访问正确的 ref。