图片 onClick 事件属性 React答案

【问题标题】：Image onClick event attribute React图片 onClick 事件属性 React
【发布时间】：2022-10-23 21:24:57
【问题描述】：

我想动态地将onClick 属性添加到图像中。但是点击事件不起作用。

//Code

const parser = new DOMParser();
  
    const doc = parser.parseFromString(htmlContent,
      "text/html"
    );
 
    const imageData = doc.querySelectorAll("img");

 imageData.forEach((x: any) => {
     
            htmlContent = htmlContent.replace(
                x.outerHTML,
                '<img width="240" height="160" style="cursor: grab; margin: 10px;" src="' +
                  x.getAttribute("src") + '"onClick={() => setOpen(true)}/>'
              );
          });

试过了，

onClick={handleClick(true)}

const handleClick = (flag: boolean) => {
      setOpen(flag)
  }  

onClick={setOpen(true)}

onClick={() => ' +setOpen(true) + '}

x.addEventListener('onClick', () => setOpen(true));

html内容：

<p>new test <img src="https://i.imgur.com/7KpCS0Y.jpg%22" width="100" height="100" id="img_1665468977463_0"></p><p>new new test <img src="https://i.imgur.com/7KpCS0Y.jpg%22" width="100" height="100" id="img_1665468986873_0"></p><p>next level test <img src="https://i.imgur.com/7KpCS0Y.jpg%22" width="100" height="100" id="img_1665468996237_0"></p><p></p><p>format test</p><ol><li><p>one</p></li><li><p>two </p></li><li><p>three</p></li></ol>

我能得到任何帮助吗？

【问题讨论】：

你循环的 imageData 是什么？您可以添加实际 html 内容的示例吗？
@SiddharthSathe 更新了问题，请检查

标签： javascript reactjs typescript

【解决方案1】：

尝试动态添加

htmlContent.addEventListener("click", handleOnClick, false);

const handleOnClick = () => {
   setOpen(true)
}

【讨论】：

html Content 是一个带有 HTML 内容的字符串变量

【解决方案2】：

在不应替换的 HTML 标记中的 htmlcontent 之外创建一个包装 div，并将事件侦听器附加到该 div

<div id="wrapper" onClick={handleOpen(true)}>
  //your HTML content
  {htmlContent}
 </div>

【讨论】：

【解决方案3】：

如果您共享 htmlContent 的整个代码，它可以帮助我们找到解决方案。无论如何，请尝试如下：

React.useEffect(() => {
  if(document.querySelector('.img-item')) {
    document.querySelector('.img-item').addEventListener('click', () => {
      setOpen(true)
    })
  }
}, [htmlContent])


imageData.forEach((x: any) => { 
  htmlContent = htmlContent.replace(
      x.outerHTML,
      '<img className="img-item" width="240" height="160" style="cursor: grab; margin: 10px;" src="' +
        x.getAttribute("src") + '"/>'
    );
});

【讨论】：

共享 HTML 内容。请看一下
你是如何定义变量 htmlContent 的？使用状态？
不，这是作为参数传递给方法的。像const handleImages = (htmlContent: string) =>{}
html 内容没有任何带有 img-item 类名的图像，所以这不会按预期工作

【解决方案4】：

而不是传递 onClick 您可以传递 id/ 寻找现有的，然后一旦你安装你的htmlContent（我猜这是计划）你可以：

useEffect(() => {
  document.getElementById('id').addEventlistener('click', setOpen(true));
}, [])

【讨论】：