面试题：如何在 React 中阻止事件的默认行为？

在 React 中阻止事件的默认行为，需要调用事件对象（SyntheticEvent）上的 preventDefault() 方法。不能使用 return false 的方式，因为这在 React 中无效。

✅ 正确方法：使用 event.preventDefault()

function MyForm() {
  const handleSubmit = (event) => {
    // 阻止表单的默认提交行为（页面刷新）
    event.preventDefault();
    console.log('表单提交，但页面不会刷新');
    // 执行自定义逻辑，如 AJAX 提交
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">提交</button>
    </form>
  );
}

function MyLink() {
  const handleClick = (event) => {
    // 阻止链接的默认跳转行为
    event.preventDefault();
    console.log('链接被点击，但未跳转');
    // 执行其他操作，如弹窗或状态更新
  };

  return (
    <a href="https://example.com" onClick={handleClick}>
      点击我（不会跳转）
    </a>
  );
}

---

❌ 错误方法：return false

在原生 HTML 事件中，return false 可以阻止默认行为和事件冒泡，但在 React 中不起作用。

function WrongExample() {
  const handleClick = (event) => {
    // ❌ 无效！React 中 return false 不会阻止默认行为
    return false;
  };

  return <a href="#" onClick={handleClick}>这个链接仍然会跳转</a>;
}

---

关键点说明

1. 事件对象是 SyntheticEvent： React 使用 SyntheticEvent 作为跨浏览器兼容的事件包装器。它具有与原生事件相同的接口，包括 preventDefault() 和 stopPropagation()。
2. preventDefault() 是唯一方式： 必须显式调用 event.preventDefault() 来阻止默认行为。这是 React 的标准做法。
3. preventDefault() 可在事件处理函数中的任意位置调用： 即使在函数末尾调用，也能生效。
4. 与阻止事件冒泡的区别：
   • event.preventDefault()：阻止事件的默认行为（如表单提交、链接跳转）。event.stopPropagation()：阻止事件向上冒泡到父组件。

---

总结

在 React 中阻止事件默认行为的唯一正确方法是：

event.preventDefault();

牢记：不要使用 return false，它在 React 事件系统中无效。这是 React 与原生 DOM 事件的一个重要区别。