时间戳

首页 > 解决方案 > 反应功能的计时器未正确启动

javascript - 反应功能的计时器未正确启动

问题描述

我正在尝试计算用户在测验中回答问题所需的时间。

当前代码看起来像这样

function Answer({ currentQuestion, submitAnswer }) {
  var start = Date.now();

  const inputsRef = useRef();
  // const [secondsRemaining, setSecondsRemaining] = useState(0)

  const handleInput = (e) => {
    let value = e.target.value;
    let nth = parseInt(e.target.dataset.nth, 10);

    if (value === "") return;

    let inputs = inputsRef.current.querySelectorAll("input");

    inputs.forEach((element) => {
      if (parseInt(element.dataset.nth, 10) === nth + 1) {
        element.focus();
        element.select();
      }
    });
  };

  const handleSubmit = () => {
    let finalValue = "";
    const finished =  Date.now()
    const secondsCompleted = finished - start;
    let seconds = Math.floor((secondsCompleted / 1000) % 60);

    console.log(    seconds)
    let inputs = inputsRef.current.querySelectorAll("input");
    inputs.forEach((element) => (finalValue += element.value));

    finalValue = finalValue.toUpperCase();

    submitAnswer(finalValue);
  };

  useEffect(() => {
    inputsRef.current.querySelectorAll("input")[0].focus();
  }, []);

  return (
    <div>
      <div
        ref={inputsRef}
        className="input-container flex justify-center flex-wrap"
      >
        {.... <input.../>}
....
  );
}

目前，计时器仅在用户将值输入输入表单时才开始。

当这个函数呈现时，我怎样才能让它启动？

标签： javascriptreactjs

解决方案

您应该在组件中使用状态作为开始，因为每次应用程序内部有更新时，它都会改变，并且永远不会是用户开始看到问题的正确时间。并且您应该添加 useEffect 以检查问题何时更改并更新开始时间。你应该这样：

const [start, setStart] = useState();
useEffect(() => {
    setStart(Date.now());
}, [currentQuestion])

推荐阅读