Question

var Rc = <MyReactComponent 
  onChange={(e) => {console.log(e);} 
  onClick={(e) => { workIt(); }} />;

如何获取组件Rc的听众列表[＆＃39; onChange＆＃39;，＆＃39; onClick＆＃39;]。

我看到有关在DOM节点上查找侦听器的问题...... How to find event listeners on a DOM node using JavaScript;显然没有像getEventLiteners（）那样的简单调用，以及addEventListener（）是DOM DOES支持。

是否有一种干净简单的方法来获取React Component的监听器？

Answer 1

在 React 中没有任何内置的方法来执行此操作，但是您可以创建一个简单的函数来为您执行此操作：

// Build a mapping of event listeners
const getListeners = component => {
    return Object.fromEntries(
       Object
           .entries(component.props) // Get the props
           .filter(([key, value]) => key.startsWith("on")) // Filter event listeners
    );
};

const foo = <SomeComponent
    onChange={(e) => {console.log(e);} 
    onClick={(e) => { workIt(); }}
/>;

console.log("listeners", getListeners(foo));
// { onChange: f, onClick: f }

在这种情况下，我们使用 getListeners 过滤所有以“on”开头的 props，因为 React 中的每个事件侦听器都以“on”开头。

您可以通过显式过滤 React 中实际支持的事件侦听器来使其更加健壮：https://reactjs.org/docs/events.html#reference 并过滤每个 prop 的值以确保它是一个函数。

如何获取React组件的所有已注册的合成事件处理程序/侦听器的列表？

1 个答案: