我有一个可使用<a href>
单击的方框元素列表,我想在此方框元素中添加将执行onClick
但不会触发<a href>
的图标。为了更加精确,我为此使用了React。我将props中的一个函数传递给了用a
标签覆盖的子组件。单击特定图标时,我只想启动我传递的功能,而不是转到href
。如果您在框中单击其他任何地方,它将触发href
。
我尝试在图标上添加<a>
元素并覆盖原始的<a>
,但实际上并没有解决,HTML不允许这样做。现在a
和onClick
一起触发。
这里有一些代码,我将其简化为简单的示例,而不是传递整个内容:
<a href="https://stackoverflow.com/">
<div className="content is-relative">
<p className="stream__title">{this.props.stream.title}</p>
<p className="stream__game">{this.props.stream.game}</p>
<FontAwesomeIcon onClick={() => this.props.follow(this.props.stream.user)}
className="stream__follow" icon="heart" size="lg"/>
</div>
</a>
任何想法如何解决此问题?
即单击图标的事件将冒泡,将由框href处理。