我想在通过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
。
正确的方法是什么?
onClick={ () => this.onClickBlowUpImage.bind(this) }
。然而,这通常是不好的做法。 - sesamechicken<div dangerouslySetInnerHTML={{ __html: finalContent }} onClick={this.onClickBlowUpImage.bind(this)} />
。请注意,尽管在JSX标记中直接绑定可能会导致不必要的组件更新。您应该在构造函数中绑定或将箭头函数分配给属性。 - Dmitry Shuranov