React嵌套onClick冲突问题：点击内部按钮触发父元素跳转

这是典型的事件冒泡问题——当你点击子元素（内部的功能按钮）时，点击事件会沿着DOM树向上传播，最终触发父级div的跳转逻辑。别担心，有两种简单的方案可以解决这个问题：

方案一：阻止事件冒泡 #

在每个内部按钮的点击事件中调用event.stopPropagation()，这样就能阻止事件向上传递到父元素。修改你的按钮代码如下：

<div className="prop-detail-btns">
  <Button 
    className="goto" 
    onClick={(e) => {
      e.stopPropagation(); // 阻止事件冒泡到父div
      this.handleRefs(dwelling.address, index);
    }}
  >
    <FontAwesome name="map-marker" size="25"/>
  </Button>
  <Button 
    className="like" 
    onClick={(e) => e.stopPropagation()} // 同样阻止冒泡
  >
    <FontAwesome name="heart" size="25"/>
  </Button>
</div>

stopPropagation()方法会终止事件的进一步传播，这样点击按钮时只会执行按钮自身的逻辑，不会触发父元素的跳转。

方案二：拆分可跳转区域 #

如果你不想处理事件冒泡，也可以调整DOM结构，只让图片和文本区域触发跳转，功能按钮区域独立出来：

<div className="prop-detail" key={dwelling._id}>
  {/* 仅这个容器点击时触发跳转 */}
  <div onClick={() => this.props.history.push(`/propiedades/${dwelling._id}`)}>
    <img 
      src={dwelling.images[0] !== undefined ? dwelling.images[0].secure_url : 'https://res.cloudinary.com/sioc/image/upload/v1525712940/epnvioppkpvwye1qs66z.jpg'} 
      alt="" 
    />
    <div className="prop-text">
      {dwelling.price ? <span>{dwelling.price} {dwelling.currency}</span> : <span>Consulte</span>}
      <small> {dwelling.spaces.rooms}h - {dwelling.spaces.bathRoom}b</small>
      <p>Calle {dwelling.address.streetName} {dwelling.address.streetNumber}, {dwelling.address.city}, {dwelling.address.state}</p>
    </div>
  </div>
  {/* 按钮区域不受跳转逻辑影响 */}
  <div className="prop-detail-btns">
    <Button className="goto" onClick={() => this.handleRefs(dwelling.address, index)}>
      <FontAwesome name="map-marker" size="25"/>
    </Button>
    <Button className="like">
      <FontAwesome name="heart" size="25"/>
    </Button>
  </div>
</div>

这种方式通过结构拆分，让跳转逻辑只作用在需要的区域，按钮区域完全独立，从根源避免了冲突。

两种方案都能解决你的问题，选哪种取决于你的代码结构偏好~

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