javascript - React 的 dangerouslySetInnerHTML 中如何添加 onClick 事件？

问题描述

问 题

我从服务器获取一段文本，里面含有图片，需要在图片上添加点击事件。
代码如下：

onClickBlowUpImage(e) {
    console.log('test')
}
              
render() {
    const finalContent = this.state.content.replace(/<img/g, '<img id="content_img" onClick={this.onClickBlowUpImage.bind(this)}')
        
    return (
        <div dangerouslySetInnerHTML={{ __html: finalContent }}></div>
    )
}

用这种方式添加，但点击的时候报错：

Uncaught TypeError: Cannot read property 'bind' of undefined at HTMLImageElement.onclick

请问需要用什么方式才能在 dangerouslySetInnerHTML 上添加 onClick ?

解决方案

这个问题换种思路就解决了：

1. 将onClickBlowUpImage放在onClick中。
2. 然后判断点击的内容就可以了，例如：

onClickBlowUpImage(e) {
  if (e.target.id === 'content_img') {
    doSomeThing()
    })
  }
}

这篇关于javascript - React 的 dangerouslySetInnerHTML 中如何添加 onClick 事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！