Question

I want to create a React component with a render method that has an <a> tag that wraps an entire "box", if you will, which redirects to another page when clicked. Within said box there is a <button> that can be clicked that activates an event that changes state. What I want to be able to do is click the <button> and trigger the event without the redirect from the <a> tag occurring.

Tried some ideas with stopPropagation() but no luck :/ I don't want to move the button outside of the <a> tag either so not sure where to go from here.

It seems like it should be something simple but I just can't figure it out. Thanks!

the render method looks like this:

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() would look something like this:

handleClick = () => {
  if (this.state.liked) {
  console.log("disliking")
} else {
  console.log("liking")
}

this.setState({ liked: !this.state.liked})
}

Answer 1

你想要做的事似乎不可能。用户点击<a>后面的内容后，系统会将其重定向到链接的内容：http://www.google.com 如果您要执行自己的功能，请按照必须删除<a>标记的链接，并在功能结束时添加window.location = "http://www.google.com";。

Answer 2

你可以通过简单的技巧实现这一目标。看看我做了什么 -

用div替换锚点并放置一个单击处理程序
在组件中添加一个标记（单击），如果是单击按钮，则在div单击处理程序中忽略
重置标志

更新 - 看看这个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"));    
})();

Answer 3

可以这样做的一种方法是设置对anchor元素的引用，然后使用onMouseEnter和onMouseLeave上的按钮元素以编程方式更改锚元素href属性，只要用户将鼠标移到Like按钮上。

.d.ts

查看实际操作：Working fiddle

在小提琴中你会注意到链接正在激活，但是不会去任何地方，因为当按钮位于鼠标下方时它会被有效地“关闭”。如果您想要消除链接上激活的外观，则需要对锚元素进行更多操作，或者只需将a：active css属性设置为与基本/活动颜色相同的颜色。

就个人而言，如果可能的话，我会避免这种情况，但这只是一个很好的建议，这里的更多人应该学习的东西与答案不同。

反驳<a> tag and button onClick propagation

3 个答案: