如何让React优先触发子组件事件而非父组件事件

行为判定 #

这是正常行为，由DOM标准的事件冒泡机制导致。
点击内层按钮时，首先触发按钮自身绑定的onClick事件执行redirectTo('/bar')，随后点击事件会沿DOM树向上传递，触发父级div绑定的onClick事件执行redirectTo('/foo')，后执行的路由跳转覆盖了前一次跳转结果，所以最终呈现为跳转到/foo。

解决方案 #

在按钮的点击事件回调中调用事件对象的stopPropagation方法，阻止事件向上冒泡到父级元素即可，修改后代码如下：

<div onClick={() => redirectTo('/foo')}>
  <input type="text"/>
  <input 
    type="button" 
    onClick={(e) => {
      e.stopPropagation();
      redirectTo('/bar');
    }} 
  />
</div>;

如果存在多场景判断需求，也可以在父级点击事件中通过e.target判断事件触发源，过滤掉来自按钮的点击事件，单独处理外层区域的点击逻辑。

内容的提问来源于stack exchange，提问作者sonphung.xf