reactjs - 集中捕获 React 应用程序中的所有用户交互

Question

我需要在 React ex 中捕获用户交互：单击、滚动等。我正在寻找一种可以集中捕获这些事件的方法，这样我就不必在应用程序内的每个组件中编写代码。是否有任何监听器或可以集中捕获所有这些事件的东西？

Answer 1

您可以为 redux 创建自定义中间件并使用它记录用户操作。在这种情况下，您将只能捕获通过 dispatch 方法传递的操作。

const logger = store => next => action => {
  console.log('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  return result
}

以下是将它应用到 Redux 商店的方法：

import { createStore, combineReducers, applyMiddleware } from 'redux'
​
const app = combineReducers(reducers)
const store = createStore(
  app,
  applyMiddleware(logger)
)

您可以通过此链接阅读有关中间件的更多信息。

Answer 2

你可以monkeypatch addEventListener（见这个）

// The magic code
var oldAddEventListener = EventTarget.prototype.addEventListener;

EventTarget.prototype.addEventListener = function(eventName, eventHandler)
{
  oldAddEventListener.call(this, eventName, function(event) {
      console.log(event);
      eventHandler(event);
  });
};

警告：您必须确保在注册任何事件之前覆盖 addEventListener 函数。

Answer 3

您可以为此使用例如react-idle-timer。

导入组件：

import IdleTimer from 'react-idle-timer';

然后在您的渲染方法中添加如下内容：

<><IdleTimer onAction={(e) => console.log('event happened: ', e)} /><YourLayoutComponent /></>

移动并单击页面时，您应该会得到类似的结果：