面试题：React事件对象的合成机制及阻止默认行为的方法

Question

React使用合成事件机制来处理事件。请解释React事件合成机制的原理，以及如何在这种机制下阻止事件的默认行为。如果在一个自定义组件中有多个嵌套元素都绑定了不同的事件处理函数，如何确保阻止默认行为时不会影响到其他相关事件的正常执行？

Answer 1

React事件合成机制原理

1. 事件委托：React并不是将事件处理程序直接绑定到真实的DOM元素上，而是在顶层DOM（通常是 document）上使用单一的事件监听器。当事件发生时，React会根据事件的类型和目标元素，在内部构建一个合成事件对象，并将其分发到对应的组件的事件处理函数中。
2. 合成事件对象：React创建了一个合成事件对象，它模拟了原生DOM事件的接口，但提供了跨浏览器的兼容性。这个合成事件对象在事件处理函数执行完毕后会被回收，以避免内存泄漏。

阻止事件默认行为

在React的合成事件中，可以通过调用事件对象的 preventDefault() 方法来阻止事件的默认行为。例如，对于一个链接的点击事件：

function handleClick(event) {
  event.preventDefault();
  // 其他处理逻辑
}

function MyLink() {
  return <a href="#" onClick={handleClick}>点击我</a>;
}

在嵌套元素中阻止默认行为且不影响其他相关事件

1. 精确控制：在每个事件处理函数中，根据具体的业务逻辑来决定是否阻止默认行为。例如，如果只想在特定条件下阻止链接的默认跳转：

function handleClick(event) {
  if (someCondition) {
    event.preventDefault();
  }
  // 其他处理逻辑
}

function MyNestedComponent() {
  return (
    <div>
      <a href="#" onClick={handleClick}>点击我</a>
    </div>
  );
}

2. 使用事件传播控制：利用事件的传播机制，在需要阻止默认行为的元素的事件处理函数中阻止事件传播（event.stopPropagation()），这样可以避免事件向上冒泡影响到其他元素的事件处理。例如：

function handleInnerClick(event) {
  event.preventDefault();
  event.stopPropagation();
  // 处理内部元素的点击逻辑
}

function handleOuterClick() {
  // 处理外部元素的点击逻辑
}

function MyNestedComponent() {
  return (
    <div onClick={handleOuterClick}>
      <a href="#" onClick={handleInnerClick}>点击我</a>
    </div>
  );
}

通过这种方式，可以确保在阻止内部元素的默认行为时，不会干扰到外部元素的正常事件执行。