Question

问题：

在React事件处理程序中，有一种方便的方法可以同时执行e.preventeDefault和e.stopPropagation（您以前使用return false的方式）吗？

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

return false;

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

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

This GitHub issue解释说React团队正试图偶然解决return false事件回调问题（即无意阻止默认/停止传播）。

这很有道理，我理解它背后的逻辑，但是......

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

比return false更难以记忆和写作。

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

如果没有，有没有办法在这个函数中修补这个函数？

Answer 1

没有一种明确的方法可以做到这一点，仅仅因为它不是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);
    }
});

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

React.js：不能再“返回false”......是否有等价的？

1 个答案: