React.js:不能再“返回假”了......有没有等价的?

IT技术 events reactjs
2021-05-25 12:40:08

问题:

在一个做出react的事件处理程序,有没有方便的方式e.preventeDefault,并e.stopPropagation同时(你曾经是能够与方式return false)?

背景: React 已开始弃用:

return false;

内部事件处理程序作为实现的一种手段:

e.preventDefault();
e.stopPropagation();

这个 GitHub 问题解释了 React 团队正在尝试解决事件回调的问题,这些问题是return false偶然的(即无意阻止默认/停止传播)。

这是完全有道理的,我理解其背后的逻辑,但是......

e.preventDefault();
e.stopPropagation();

令人讨厌的是,它比return false.

所以,我的问题是:有没有什么方便的方法可以return false在 React 事件处理程序中获取功能?例如,是否有某种e.stopBoth()方法、return React.PREVENT常量或任何其他方式来获得旧return false功能?

或者,如果没有,有没有办法修补这样的功能?

1个回答

没有明确的方法可以做到这一点,仅仅是因为这不是 React 团队似乎想要鼓励的行为。有人猜测,将来可以以其他方式使用处理程序的返回值,但这对我来说听起来很混乱且违反直觉。

无论如何,为了我们的目的,您可以:

a) Hack into the SyntheticEventstuff,但覆盖/增强 React 内部结构听起来是一个非常糟糕的主意。SyntheticEvent让 React 规范化事件处理。

b) 只需为此创建一个简单的辅助函数(hattip @octref):

// In some killEvent.js
module.exports = function(event) {
    e.preventDefault();
    e.stopPropagation();
}


// In some component file
var killEvent = require('./killEvent');

var Component = React.createClass({
    ... component implementation

    myEventHandler = function(e) {
        killEvent(e);
    }
});

确切的实现将取决于您使用的module系统,但希望您能理解。我认为这是最好的方法,因为它非常简单,易于操作,并且非常清楚地表达了您想要做的事情。