当前位置 : 主页 > 网页制作 > React >

事件 – React.js:不能再“返回false”……是否有等效的?

来源:互联网 收集:自由互联 发布时间:2021-06-15
题: 在React事件处理程序中,是否有一种方便的方法可以同时执行e.preventeDefault和e.stopPropagation(以前的方式可以返回false)? 背景: React已开始弃用以下内容: return false; 内部事件处理程序
题:

在React事件处理程序中,是否有一种方便的方法可以同时执行e.preventeDefault和e.stopPropagation(以前的方式可以返回false)?

背景:
React已开始弃用以下内容:

return false;

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

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

This GitHub issue解释了React团队正在尝试解决事件回调问题,这些回调会偶然返回错误(即没有意图阻止默认/停止传播).

这很有道理,我理解它背后的逻辑,但……

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

令人烦恼地记住和写作比回归虚假更难.

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

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

没有一种确定的方法可以做到这一点,仅仅因为它不是React团队似乎想要鼓励的行为.有人猜测来自处理程序的返回值可能会在未来以其他方式使用,但这对我来说听起来很麻烦且反直觉.

无论如何,我们可以:

a)进入SyntheticEvent stuff,但重写/扩充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);
    }
});

确切的实现取决于您正在使用的模块系统,但希望您能得到这个想法.我认为这是最好的方法,因为它非常简单,易于操作,并且表达了你想要做的非常清楚的事情.

网友评论