检测两个条件之间的经过时间

Question

我目前正在开发一个 React 应用程序并尝试检测达到某个输入值长度所需的时间。

它是一个受控输入，通过redux action和reducer存储和设置值。

我想在输入值为!== ""时开始计时，在.length等于13时停止计时。

此外，在应用程序逻辑中，如果到达.length === 13 所需的时间类似于100ms （+ 或 - ），这将意味着应用程序用户使用了条形码扫描仪，否则，他输入了条形码键盘。

我尝试使用带有new Date() 的变量来获取时间差异，但render() 逻辑阻止了经过时间计数的维护...

知道如何实现我的目标吗？

我把组件代码留在下面， 提前谢谢你！

import React from "react";
import StoreInput from "../StoreInput/index";
import { connect } from "react-redux";
import "./index.scss";

import { setStoreInputFieldValue } from "../../actions/store.actions";
import { addArticleToStore } from "../../actions/articles.actions";

type ScanSetProps = {
  // Redux State
  storeInputFieldValue?: any;

  // Redux Actions
  setStoreInputFieldValue?: any;
  addArticleToStore?: any;
};

class ScanSet extends React.Component<ScanSetProps> {
  handleScanSet = (event) => {
    const { setStoreInputFieldValue } = this.props;
    setStoreInputFieldValue(event.target.value);
  };

  // Component render
  render() {
    const { storeInputFieldValue, addArticleToStore } = this.props;

    return (
      <div className="ScanSet">
        <StoreInput
          idStoreInput={"scanSetInput"}
          typeStoreInput={"number"}
          placeholderStoreInput={
            "Scannez le code barre ou saisissez le code EAN"
          }
          storeInputFillMethod={this.handleScanSet}
        />
        <button
          id="scanSetButton"
          className={
            storeInputFieldValue.length === 13
              ? "enabledButton"
              : "disabledButton"
          }
          onClick={() => addArticleToStore(storeInputFieldValue)}
        >
          Ajouter
        </button>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  storeInputFieldValue: state.store.storeInputFieldValue,
});

const mapDispatchToProps = (dispatch) => ({
  setStoreInputFieldValue: (input_value) =>
    dispatch(setStoreInputFieldValue(input_value)),
  addArticleToStore: (article_ean) => dispatch(addArticleToStore(article_ean)),
});

export default connect(mapStateToProps, mapDispatchToProps)(ScanSet);

Answer 1

我建议使用状态。

当输入 !== '' 时， this.setState((state) => {...state, startTime: new Date().getTime()}) 当 value.length === 13 时， this.setState((state) => {...state, endTime: new Date().getTime()}

然后你可以有另一个部分来解释差异，(endTime - startTime)

由于您使用的是 redux，如果您有一个可以解决此问题的切片。您可以简单地调度这两个动作（setStartTime、setEndTime）并让 reducer 处理上述逻辑。

Answer 2

Urmzd 的回答是一个很好的方法，它解决了我的问题，并且每次触发 "SET_END_TIME" 动作到 getTimeDiff 并启动进一步的逻辑时，它还使用 Redux Saga 库。这是现在的代码：

1. 组件代码：index.tsx

import StoreInput from "../StoreInput/index";
import { connect } from "react-redux";
import "./index.scss";

import {
  setStoreInputFieldValue,
  setStartTime,
  setEndTime,
  resetTimeDiff,
} from "../../actions/store.actions";
import { handleInputEan } from "../../actions/articles.actions";

type ScanSetProps = {
  // Redux State
  storeInputFieldValue?: any;

  // Redux Actions
  setStoreInputFieldValue?: any;
  handleInputEan?: any;
  setStartTime?: any;
  setEndTime?: any;
  resetTimeDiff?: any;
};

class ScanSet extends React.Component<ScanSetProps> {
  handleScanSet = (event) => {
    const {
      setStoreInputFieldValue,
      storeInputFieldValue,
      setStartTime,
      setEndTime,
      resetTimeDiff,
    } = this.props;
    setStoreInputFieldValue(event.target.value);
    if (storeInputFieldValue.length + 1 === 1) {
      setStartTime();
    } else if (storeInputFieldValue.length + 1 === 13) {
      setEndTime();
    } else if (storeInputFieldValue.length - 13 === 0) {
      resetTimeDiff();
    }
  };

  // Component render
  render() {
    const { storeInputFieldValue, handleInputEan } = this.props;
    return (
      <div className="ScanSet">
        <StoreInput
          idStoreInput={"scanSetInput"}
          typeStoreInput={"number"}
          placeholderStoreInput={
            "Scannez le code barre ou saisissez le code EAN"
          }
          storeInputFillMethod={this.handleScanSet}
        />

        <button
          id="scanSetButton"
          className={
            storeInputFieldValue.length === 13
              ? "enabledButton"
              : "disabledButton"
          }
          onClick={() => handleInputEan()}
        >
          Ajouter
        </button>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  storeInputFieldValue: state.store.storeInputFieldValue,
  timeDiff: state.store.timeDiff,
});

const mapDispatchToProps = (dispatch) => ({
  setStartTime: () => dispatch(setStartTime()),
  setEndTime: () => dispatch(setEndTime()),
  resetTimeDiff: () => dispatch(resetTimeDiff()),
  setStoreInputFieldValue: (input_value) =>
    dispatch(setStoreInputFieldValue(input_value)),
  handleInputEan: () => dispatch(handleInputEan()),
});

export default connect(mapStateToProps, mapDispatchToProps)(ScanSet);

1. 操作代码：store.actions.js（带有来自 store.const.js 的常量）

import * as storeConst from "../const/store.const";

export const setStartTime = () => ({
  type: storeConst.SET_START_TIME,
  payload: new Date().getTime(),
});

export const setEndTime = () => ({
  type: storeConst.SET_END_TIME,
  payload: new Date().getTime(),
});

export const getTimeDiff = () => ({
  type: storeConst.GET_TIME_DIFF,
});

export const resetTimeDiff = () => ({
  type: storeConst.RESET_TIME_DIFF,
});

1. Reducers 代码：store.reducer.js（将 store.const.js 中的 const 和 reducer 组合在一个 index.js 文件中）

import * as storeConst from "../const/store.const";

const initState = {
  startTime: null,
  endTime: null,
  timeDiff: null,
};

const store = (state = initState, action) => {
  switch (action.type) {
    case storeConst.SET_START_TIME:
      return { ...state, startTime: action.payload };

    case storeConst.SET_END_TIME:
      return { ...state, endTime: action.payload };

    case storeConst.GET_TIME_DIFF:
      return { ...state, timeDiff: state.endTime - state.startTime };

    case storeConst.RESET_TIME_DIFF:
      return { ...state, timeDiff: null };

    default:
      return state;
  }
};

export default store;

4. Redux Saga 代码：store.saga.js（组合：在 index.js 文件中作为 rootSaga）

import { put } from "redux-saga/effects";
import { store } from "../store";
import {
  getTimeDiff,
  resetTimeDiff,
} from "../actions/store.actions";
import {
  handleInputEan,
} from "../actions/articles.actions";

export function* getTimeDiffLogic() {
  yield put(getTimeDiff());
  const timeDiff = yield store.getState().store.timeDiff;
  if (timeDiff < 250) {
    yield put(handleInputEan());
    yield put(resetTimeDiff());
  }
}

希望这能帮助像它这样的人对我有很大帮助！