反应 <a> 标签和按钮 onClick 传播

新手上路,请多包涵

我想创建一个带有 <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 许可协议

阅读 242
1 个回答

你可以用一个简单的技巧来实现这一点。看看我做了什么 -

  1. 用 div 替换锚点并放置点击处理程序
  2. 在组件中添加一个标志(单击),如果是按钮单击,则在 div 单击处理程序中忽略
  3. 重置标志

更新 - 查看这个 js 小提琴: 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"));
})();

原文由 Rabi 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题