React：如何在dangerouslySetInnerHTML的img标签上添加onClick()函数？

Question

我想在通过dangerouslySetInnerHTML显示的html字符串中，为<img>添加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。

正确的方法是什么？

- Kevin K

---

我想你可以在“img”标签上拆分字符串，并从字符串中提取它，以便在jsx中呈现它。然后呈现字符串的前半部分-> jsx img标签w /处理程序-> 字符串的后半部分。相当破解，但是... - mhatch

如果你的组件有一个构造函数，你应该在那里绑定函数。我认为内联绑定类似于 onClick={ () => this.onClickBlowUpImage.bind(this) }。然而，这通常是不好的做法。 - sesamechicken

为什么不直接将事件监听器添加到<div>本身呢？<div dangerouslySetInnerHTML={{ __html: finalContent }} onClick={this.onClickBlowUpImage.bind(this)} />。请注意，尽管在JSX标记中直接绑定可能会导致不必要的组件更新。您应该在构造函数中绑定或将箭头函数分配给属性。 - Dmitry Shuranov

感谢您对函数绑定的建议。 - Kevin K

Answer 1

在组件生命周期中添加事件监听器：

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

那么你在 HTML 中就不需要 onClick 部分 :)

- Mirror318