Question

我想在通过onClick()显示的html字符串<img>上添加dangerouslySetInnerHTML。我是这样做的：

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。

什么是正确的方法？

Answer 1

在组件生命周期中放置一个事件侦听器：

componentDidMount() {
  var component = this;
  $('.contentImage').click(function(e){
    component.blowUpImage(e.target.id);
  })
}

那么您就不需要html中的onClick部分了：）

React：如何在dangerouslySetInnerHTML的img标签上添加onClick（）

1 个答案: