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

Question

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

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 ?

Answer 1

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

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

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

Answer 2

可以在父级上加事件

Answer 3

纯html里面 是不可以写react 可以换一种写法 onclick里面

Answer 4

dangerouslySetInnerHTML的使用可以查看官方文档，https://facebook.github.io/re...
const finalContent = this.state.content.replace(/<img/g, '<img id="content_img" onClick={this.onClickBlowUpImage.bind(this)}')，这样写，也是拿不到onClickBlowUpImage函数的，如果真要这样写，demo 如下：

  例1：const Img = React.createClass({
        onClickBlowUpImage: function (e) {
              console.log('test')
        },
        render: function () {

          return (
             <img src={this.props.src} onClick={this.onClickBlowUpImage} style={{width:'80px',height:'80px'}}/>
          )
        }
    });

  例2:  const Img02 = React.createClass({
            render: function () {
              return (
                        <div style={{color:'red'}} dangerouslySetInnerHTML={{__html: this.props.img}}></div>
              )
            }
        });
        
       ReactDOM.render(
         <Img02 img="<img  onClick='test()' src='https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png' width='40px' height='40px' />"/>,
          document.getElementById('example')
        );
        
      <script type="text/javascript">
      function test () {
        console.log("test");
      }
    </script>

Answer 5

问题解决了吗