我想创建一个带有 <a>
标签的渲染方法的 React 组件,如果你愿意的话,它会重定向到另一个页面。在所述框中有一个 <button>
可以单击它激活一个改变状态的事件。我希望能够做的是单击 <button>
并触发事件,而不会发生来自 <a>
标记的重定向。
用 stopPropagation() 尝试了一些想法,但没有成功:/我不想将按钮移到 <a>
标签之外,所以不确定从这里去哪里。
看起来应该很简单,但我就是想不通。谢谢!
渲染方法如下所示:
render(){
return(
<div>
<a href="http://www.google.com">
<div className="box">
<h2 className="title">Random Title</h2>
<button onClick={this.handleClick}> Like </button>
</div>
</a>
</div>
)
}
handleClick() 看起来像这样:
handleClick = () => {
if (this.state.liked) {
console.log("disliking")
} else {
console.log("liking")
}
this.setState({ liked: !this.state.liked})
}
原文由 JAbrams 发布,翻译遵循 CC BY-SA 4.0 许可协议
你可以用一个简单的技巧来实现这一点。看看我做了什么 -
更新 - 查看这个 js 小提琴: https ://jsfiddle.net/rabinarayanb/pvx2n3x3/
注意 - 我使用了 es5 语法。你可以转换成es6