React中如何在Link组件内使用按钮且不触发页面跳转？

问题场景 #

我是React初学者，现有如下代码：通过react-router-dom的Link组件包裹帖子卡片，实现点击卡片跳转至详情页，但卡片内的图片切换按钮点击时也会触发页面跳转，希望解决这个冲突。

import { NavLink as Link } from 'react-router-dom'

return (
  <div>
    {posts.map((actualData, index) => (
      <Link to={'/' + actualData.id}>
        <div className='format_link'>
          <div className='image_link'>
            <div className='image'>
              <img
                className='images'
                id={actualData.id}
                src={getImage(actualData.path, 0)}
                alt='Italian Trulli'
              />
              <button
                className='arrow right'
                id={'button' + actualData.id}
                onClick={() => changeImageNext(actualData.id, actualData.path)}>
                {'>'}
              </button>
              <button
                className='arrow left'
                id={'button' + actualData.id}
                onClick={() => changeImagePre(actualData.id, actualData.path)}>
                {'<'}
              </button>
            </div>
          </div>
          <div className='desc_link'>
            <div className='event'>
              <div className='save'> </div>
            </div>
          </div>
        </div>
      </Link>
    ))}
  </div>
)

尝试过的无效方案 #

• 用semantic-ui-react的Button替换原生按钮，问题依旧
• 尝试使用event.stopPropagation()但调用方式错误，代码如下：

function changeImagePre(e, id, images) {
  e.stopPropagation()
  var num = parseInt(result[id].images)
  //...
}

return (
  <div>
    {posts.map((actualData, index) => (
      <Link to={'/' + actualData.id}>
        <div className='format_link'>
          <div className='image_link'>
            <div className='image'>
              <img
                className='images'
                id={actualData.id}
                src={getImage(actualData.path, 0)}
                alt='Italian Trulli'
              />
              <button
                className='arrow right'
                id={'button' + actualData.id}
                onClick={(e) =>
                  changeImageNext(actualData.id, actualData.path)
                }>
                {'>'}
              </button>
              <button
                className='arrow left'
                id={'button' + actualData.id}
                onClick={(e) => changeImagePre(actualData.id, actualData.path)}>
                {'<'}
              </button>
            </div>
          </div>
          <div className='desc_link'>
            <div className='event'>
              <div className='save'> </div>
            </div>
          </div>
        </div>
      </Link>
    ))}
  </div>
)

正确解决方案 #

问题出在没有正确传递事件对象给处理函数，导致stopPropagation()未生效。只需按以下步骤修改：

1. 修正处理函数的参数顺序 #

确保事件对象e作为第一个参数传入，然后调用e.stopPropagation()阻止事件冒泡到外层的Link组件：

function changeImagePre(e, id, images) {
  e.stopPropagation(); // 阻止事件向上冒泡到Link
  // 你的图片切换逻辑
  var num = parseInt(result[id].images);
  // ...
}

function changeImageNext(e, id, images) {
  e.stopPropagation();
  // 你的图片切换逻辑
}

2. 在按钮的onClick回调中传递事件对象 #

调用处理函数时，把事件对象e作为第一个参数传递：

<button
  className='arrow right'
  id={'button' + actualData.id}
  onClick={(e) => changeImageNext(e, actualData.id, actualData.path)}
>
  {'>'}
</button>
<button
  className='arrow left'
  id={'button' + actualData.id}
  onClick={(e) => changeImagePre(e, actualData.id, actualData.path)}
>
  {'<'}
</button>

备选方案：调整DOM结构 #

如果不想处理事件冒泡，可以将图片切换按钮移出Link组件的包裹范围，仅让卡片的非按钮区域触发跳转。但这种方式需要调整布局样式，适合对布局灵活性要求较高的场景。

内容的提问来源于stack exchange，提问作者kekko4000