React.js:不能“返回false"；不再...有同等的吗? [英] React.js: Can't "return false" anymore ... is there an equivalent?

问题描述

问题:

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

Within a React event handler, is there a convenient way to do e.preventeDefault and e.stopPropagation simultaneously (the way you used to be able to with a return false)?

背景: React已经开始弃用:

Background: React has started deprecating the use of:

return false;

内部事件处理程序可实现以下目的:

inside event handlers as a means of achieving:

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

此GitHub问题解释说React团队正在尝试解决该问题return false偶然发生的事件回调(即无意阻止Default/stopPropagation).

This GitHub issue explains that the React team is trying to solve the problem of event callbacks which return false incidentally (ie. without the intent to preventDefault/stopPropagation).

这很合理，我理解其背后的逻辑，但是...

That makes perfect sense, and I understand the logic behind it, but ...

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

与return false相比，

更难记住和编写.

is annoyingly more difficult to remember and write than return false.

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

So, my question is: is there any convenient way to get return false functionality inside a React event handler? For instance, is there some sort of e.stopBoth() method, or a return React.PREVENT constant, or any other way to get the old return false functionality?

或者，如果没有，是否有任何方法可以猴子修补此类功能?

Or if not, is there any way to monkey patch such a function in?

推荐答案

没有确定的方法，仅仅是因为这不是React团队似乎想要鼓励的行为.有人推测，将来可能会以其他方式使用处理程序的返回值，但这听起来很混乱，而且违反了我的直觉.

There isn't a definitive way of doing this, simply because it's not the behaviour the React team seems to want to encourage. There's speculation that return values from handlers could be used in some other way in future, but that sounds messy and counter-intuitive to me.

无论如何，您可以:

a)入侵 SyntheticEvent内容，但是重写/增强React内部听起来似乎是个坏主意. SyntheticEvent让React规范化事件处理.

a) Hack into the SyntheticEvent stuff, but overriding/augmenting the React internals sounds like a really bad idea. SyntheticEvent lets React normalize event handling.

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

b) Just create a simple helper function for this (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);
    }
});

确切的实现将取决于您所使用的模块系统，但希望您能理解.我认为这是最好的方法，因为它非常简单，易于执行，并且可以很清楚地表达您要执行的操作.

The exact implementation would depend on what module system you're using but hopefully you get the idea. I think this is the best approach as it is extremely simple, easy to do, and expresses what you're trying to do pretty clearly.

这篇关于React.js:不能“返回false"；不再...有同等的吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！