React 基础面试题, 如何在 React 中阻止事件的默认行为?

Step 1

Q:: 如何在 React 中阻止事件的默认行为？

A:: 在 React 中，你可以通过在事件处理函数中调用 event.preventDefault() 来阻止事件的默认行为。例如，在处理表单提交事件时，你可以使用 event.preventDefault() 来阻止浏览器的默认提交行为。代码示例：

 
function handleSubmit(event) {
  event.preventDefault();
  // 自定义表单处理逻辑
}
 

Step 2

Q:: 为什么在 React 中使用 event.preventDefault() 而不是原生的 return false？

A:: 在 React 中，事件处理机制与传统 DOM 不同。React 使用合成事件系统来处理事件，并且并不总是阻止事件的默认行为。这意味着使用 return false 并不能达到阻止默认行为的效果。相反，React 提供了 event.preventDefault() 作为阻止默认行为的标准方法。

Step 3

Q:: 合成事件系统 (Synthetic Event System) 在 React 中的作用是什么？

A:: 合成事件系统是 React 用于跨浏览器统一事件行为的机制。React 会为每个事件创建一个合成事件对象，该对象包装了原生事件，并提供一致的接口，以确保在不同浏览器中的行为相同。合成事件的生命周期短暂，处理完后会被回收以提升性能。

Step 4

Q:: 在表单提交中阻止默认行为的常见场景有哪些？

A:: 在实际开发中，阻止表单的默认提交行为通常用于通过 AJAX 方式提交数据，而不是让浏览器刷新页面。例如，在单页应用 (SPA) 中，我们希望表单提交后页面不会刷新，因此会使用 event.preventDefault() 并手动处理数据提交。