Question

我想覆盖元素的点击处理程序。

到目前为止，我设法通过将<a>元素包装在我自己的组件中来实现我自己的代码，就像这个简化的例子一样：

class Link extends React.Component {
  onClick(event) {
    // ...
    event.preventDefault();
    // ...
    if (this.props.onClick)
      this.props.onClick(event);
  }

  render() {
    return <a href={this.props.href} onClick={(e) => this.onClick(e)}>{this.props.children}</a>
  }
}

我只使用<a href="...">

而不是<Link href="...">

不幸的是，我需要使用其中包含链接的其他组件。有什么方法可以通知我任何DOM更改，以便我可以应用此处理程序？我宁愿不必重写依赖项;有没有办法改变它们的渲染方式？

我考虑过使用访问者模式以递归方式访问所有组件的所有子项，但我意识到这可能不会返回我期望的结果，因为元素只有在它们实际呈现时才存在。

如何使用React覆盖DOM中元素类型的所有单击处理程序？

0 个答案: