将 click 事件处理程序附加到通过 dangerouslySetInnerHTML 注入的链接的模式

【问题标题】：Pattern for attaching click event handlers to links injected via dangerouslySetInnerHTML将 click 事件处理程序附加到通过 dangerouslySetInnerHTML 注入的链接的模式
【发布时间】：2017-08-24 02:57:24
【问题描述】：

所以我们通过 dangerouslySetInnerHTML 注入 HTML 内容。关于将 onclick 事件处理程序附加到注入的 HTML 中的所有链接的良好模式的任何想法？或者，我应该有 React 之外的逻辑来处理这个吗？

【问题讨论】：

将其附加到父元素，然后检查事件目标。
@zerkms 我明天必须确认，你能提交这个作为答案吗？我认为这是一个重要的问题/答案。

标签： javascript reactjs

【解决方案1】：

这是一种方式，但 dangerouslySetInnerHTML 仅用于呈现纯 html。这意味着您的链接应该像普通 HTML 中的所有普通链接一样重定向。
不管怎样，这就是@zerkms 所说的。
例如

class MyComponent extends Component {
  showEvent(e) {
    console.log('the event:');
    console.log(e.target.id); //someDiv

  }
  someHtml() {
    return {__html: `<div id="someDiv" style="background-color:yellow;"> First Second </div>`}; 
  }
  render() {
    return <div onClick={this.showEvent} dangerouslySetInnerHTML={this.someHtml()}></div>;
  }
}

在 showEvent 中，您可以验证 id 并执行一些操作。
希望对您有所帮助。

【讨论】：