当涉及到 reactjs 时，preventDefault vs return false答案

【问题标题】：preventDefault vs return false when it comes to reactjs当涉及到 reactjs 时，preventDefault vs return false
【发布时间】：2018-04-16 11:43:48
【问题描述】：

我今天开始学习 Reactjs，发现一个有趣的事实（并没有找到任何相关主题）我们必须使用 preventDefault 而不是使用 return false 语句来防止默认行为：https://reactjs.org/docs/handling-events.html

但据我所知，return false 相当于（来自 jQuery 背景）：

// e.preventDefault();
// e.stopPropagation();
// stop function execution after return false
// stops the callback function

但我很想知道 react 是如何实现的，因此我们不能使用 return false 语句，我们必须使用 preventDefault 来防止默认行为。

那么，对于 reactjs，preventDefault 和 return false 之间到底有什么区别？为什么 preventDefault 在 reactjs 中比 return false 更健壮？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

react 中的事件不是浏览器的原生事件，它们是为了您的方便而包装的。

您的事件处理程序将被传递 SyntheticEvent 的实例，一个围绕浏览器的本机事件的跨浏览器包装器。它有与浏览器的原生事件相同的界面，包括 stopPropagation() 和 preventDefault()，除了事件有效在所有浏览器中都相同。

https://reactjs.org/docs/events.html

所以当你做 preventDefault 时，你不是直接调用原生事件的方法，而是 react 会照顾你。

所以返回 false 是返回 false 来响应事件而不是原生事件，这意味着，它实际上并没有做任何事情......

【讨论】：

感谢您的回答。

【解决方案2】：

当您在 DOM 中调用 return false 时，它具有一些“神奇”的行为，这些行为是隐式而不是显式的。当您在 React 中注册事件回调时，您不会在 DOM 中显式设置事件处理程序，因为 React 是对 DOM 的抽象。 React 元素是“虚拟 DOM”的一部分，您不再直接使用 DOM，因此事件处理程序在组件处理程序和 DOM 元素本身之间具有抽象层。

React 能否以 return false; 反映这种隐式行为的方式实现其 API？也许。但他们有自己的 API，显然选择不这样做。

这里是good overview 当你return false 时 DOM 如何处理事情的。

【讨论】：

我仍然需要深入研究 react 以便了解一切实际是如何工作的......

【解决方案3】：

实际上使用来自事件处理程序的return false 来防止自React 0.12 以来的默认行为has been deprecated。

因此，它不是最可靠的选择，您不能在 React 中为此目的使用 return false。

您必须明确调用事件preventDefault as explained in the documentation。

【讨论】：