reactjs 删除父项onclick子项按钮上的函数

i7uaboj4  于 2023-02-03  发布在  React
关注(0)|答案(2)|浏览(140)

这里我有一个按钮在一个div里面.我已经 Package 了主div在一个Link标签里面,这意味着每当我点击任何地方在div里面它将路由我到路径给.但是我不想要那是到被应用在我的按钮.我想要按钮到执行完全不同的功能而不是路由当点击?是比甚至可能?
这是密码

<Link to={`/shop/${book.id}`}>
    <div className='book-card'>
        <img src={book.image} alt="" />
        <h3>{book.title}</h3>
        <div>
            <p>Rating :{book.rating}</p>
            <p>${book.price}</p>
        </div>
        <button onClick={()=> console.log('Clicked')}>Add To Cart</button>
    </div>
</Link>

谢谢:)

kr98yfug

kr98yfug1#

当然。有可能。
这是冒泡的概念,用e.stopPropagation可以实现。

<button onClick={(e)=> { e.stopPropagation(); console.log('Clicked')}}>Add To Cart</button>

参考:https://javascript.info/bubbling-and-capturing
好好享受吧!

vzgqcmou

vzgqcmou2#

是的,这是可能的。为了防止按钮触发到路径的路由,您可以将按钮 Package 在一个带有href="#”的锚标记中,并防止按钮单击事件的默认行为。代码如下所示:

相关问题