我想创建一个带有 render 方法的 React 组件,该方法具有<a>
如果您愿意的话,可以包裹整个“盒子”的标签,单击后会重定向到另一个页面。在所述盒子内有一个<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})
}
你可以通过一个简单的技巧来实现这一点。看看我做了什么 -
- 将锚点替换为 div 并放置点击处理程序
- 在组件中添加一个标志(单击),如果是按钮单击,则在 div 单击处理程序中忽略
- 重置标志
更新 - 看看这个 js 小提琴:
https://jsfiddle.net/rabinarayanb/pvx2n3x3/ https://jsfiddle.net/rabinarayanb/pvx2n3x3/
注意 - 我使用了 es5 语法。你可以转换成es6
(function() {
var BoxSetup = React.createClass({
clicked : "",
getInitialState : function () {
return { clickCount : 0};
},
handleDivClick : function (event) {
if (this.clicked !== "Button") {
window.location.href = "http://www.google.com";
}
// reset
this.clicked = "";
},
handleButtonClick : function (event) {
this.clicked = "Button"
this.setState({
clickCount : ++this.state.clickCount
});
},
render : function () {
return (
<div>
<div onClick={this.handleDivClick} style={ { }}>
<div style={ { width : "100px", height : "100px", border : "1px solid red" } }>
<h2 className="title">{ this.state.clickCount }</h2>
<button onClick={this.handleButtonClick}> Like </button>
</div>
</div>
</div>
);
}
});
var element = React.createElement(BoxSetup, { title : "Hello" });
ReactDOM.render(element, document.getElementById("app"));
})();
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)