javascript - 如何通过 React 类中的动态元素调用原生 JS 函数？

Question

我正在创建一个带有图像上传组件的反应应用程序。该组件有一个文件输入字段，允许多个文件上传功能。我创建了一个函数来创建动态图像元素以在应用程序组件中显示每个上传的图像。我为此使用 FileReader()。

我为每个图像创建一个动态关闭按钮以删除图像。为此，我通过设置属性 onclick = "removeImage()" 创建动态关闭按钮，如下所示。问题是，当我单击关闭按钮时，控制台显示"removeImage is not defined“

我该如何解决这个问题？

反应组件

//remove image element
function removeImage(domId) {
  document.getElementById(domId).remove();
}

class CreatePost extends Component {
  constructor(props) {
    super(props);
    this.state = {
      postText: '',
    }
  }

getImage = (e) => {

    for (let i = 0; i < e.target.files.length; i++) {

      //create main div
      var mainDiv = document.createElement("div");
      mainDiv.setAttribute("class", "imgMain");
      mainDiv.setAttribute("id", `image${i}`);

      //create remove button
      var closeButoon = document.createElement("span");
      closeButoon.setAttribute("class", "closeImage");

      //set removeImage function to onclick attribute
      closeButoon.setAttribute("onClick", "removeImage(image"+i+")");
      closeButoon.innerText="X";

      mainDiv.appendChild(closeButoon);

      //add file reader part
      var file = e.target.files[i];
      var reader = new FileReader();
      if (fileType === "image") {
        let imgDiv = document.createElement("img")
        imgDiv.setAttribute("class", "imageOne")
        if (file) {
          reader.onload = function (e) {
            imgDiv.setAttribute('src', e.target.result)
          };
          reader.readAsDataURL(file);
        }
        mainDiv.appendChild(imgDiv);
        document.getElementById("imageLoader").appendChild(mainDiv)
      }
    }
  }

render() {
    return (
       <>
          <input
             type="file"
             id="inputImage"
             name="inputImage"
             accept="image/*"
             onChange={this.getImage}
             multiple
          />
          <div className="imageLoader" id="imageLoader"></div>
       </>
    )
}
};

export default CreatePost;

标签： javascriptreactjs

Answer 1

这是因为您将 onClick 处理程序设置为字符串的方式。该函数的范围是为了成像，需要当场引用。

closeButoon.onclick = () => removeImage(`image${i}`);