当涉及到 reactjs 时, preventDefault 与 return false

IT技术 javascript reactjs
2021-05-15 02:13:58

我今天开始学习 Reactjs,发现一个有趣的事实(并没有找到任何相关主题),我们必须使用它而preventDefault不是 usingreturn 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来防止默认行为。

那么,什么是之间到底有什么不同preventDefault,并return false当谈到reactjs?为什么preventDefaultreturn falsereactjs更健壮

3个回答

react 中的事件不是浏览器的本机事件,它们被包装起来是为了您的方便。

您的事件处理程序将传递 SyntheticEvent 的实例,这是一个围绕浏览器本机事件的跨浏览器包装器。它与浏览器的本机事件具有相同的界面,包括 stopPropagation() 和 preventDefault(),但这些事件在所有浏览器中的工作方式相同。

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

因此,当您执行 preventDefault 时,您不是直接调用本机事件的方法,而是由 react 照顾您。

因此,返回 false 是返回 false 以响应事件而不是本机事件,这意味着它实际上并没有做任何事情......

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

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

这是一个很好的概述,当您使用return false.

自 React 0.12 以来,实际上使用return falsefrom 事件处理程序来防止默认行为已被弃用

所以它不是最强大的选择,你只是不能return falseReact.

您必须preventDefault显式调用该事件如文档中所述