Question

正如标题中所提到的，我正在使用React构建一个带有flux方法的应用程序。如何记录touchmove或touchstart事件启动的所有方法？似乎无法在Google上找到类似的内容......

Answer 1

我认为最少量代码的最大价值来自于创建自己的中间件，当它们通过调度函数时在动作对象中查找事件。下面是一些示例代码，可以在react-create-app中使用，并且可以轻松修改以满足您的目的：

function createLogger(typeOfEvent) {
  return () => (next) => (action) => {
      let e;
      function isEvent(value) {
        return value.hasOwnProperty('bubbles')
      }
      Object.values(action).map(value => {
          if (isEvent(value)) {
            e = value;
          }
      })
      if (e.type === typeOfEvent) {
        console.log(e);
      }
      let returnValue = next(action)
      return returnValue
    }
}

const logger = createLogger('click')

export const store = createStore(reducer, applyMiddleware(logger));

然后确保使用适当的事件将所有操作作为值发送到某处：

<div className="App" onClick={(e) => store.dispatch({type: 'ACTION', e })}>

REACT：记录事件执行的所有方法，特别是touchstart和touchmove

1 个答案: