事件“OnKeyDown”在反應應用程式中作業不正確

大家好。我是網路開發新手。我只是無法理解問題所在。我的任務是使用 ctr ArrowUp（增加）和 ctr ArrowDown（減少）的組合來更改輸入的部分（日、月和年）。還選擇了可變部分 - 這是通過跟蹤游標的位置 (selectionStart) 來實作的。代碼有效，但是當我出于某種原因想增加或減少“年份”時，“OnKeyDown”只執行一次，其他按鈕按下無效。為什么會發生？

沙盒片段

我的代碼

import React, { useState, useEffect, useRef } from "react";
import styles from "./DataInput.module.css";

const cur_date = new Date();

const DataInput = () => {
  const inputEl = useRef();
  const [selection, setSelection] = useState();
  const [currentDate, newCurrentDate] = useState();

  const date_format = cur_date
    .toLocaleString()
    .replaceAll(".", "/")
    .replace(",", "");

  const [value, setValue] = useState(date_format);

  useEffect(() => {
    if (!selection) return; // prevent running on start
    const { start, end } = selection;
    inputEl.current.focus();
    inputEl.current.setSelectionRange(start, end);
  }, [selection]);

  const keyHandler = (e) => {
    if (e.ctrlKey && e.key === "ArrowUp") {
      e.preventDefault();
      if (
        inputEl.current.selectionStart >= 0 &&
        inputEl.current.selectionStart <= 1
      ) {
        console.log("Selection confirm!");
        setSelection({ start: 0, end: 2 });
        const newDay = cur_date.setDate(cur_date.getDate()   1);
        setValue(
          new Date(newDay)
            .toLocaleString()
            .replaceAll(".", "/")
            .replace(",", "")
        );
      }
      if (
        inputEl.current.selectionStart >= 3 &&
        inputEl.current.selectionStart <= 4
      ) {
        setSelection({ start: 3, end: 5 });
        const newMonth = cur_date.setMonth(cur_date.getMonth()   1);
        setValue(
          new Date(newMonth)
            .toLocaleString()
            .replaceAll(".", "/")
            .replace(",", "")
        );
      }
      if (
        inputEl.current.selectionStart >= 7 &&
        inputEl.current.selectionStart <= 9
      ) {
        setSelection({ start: 6, end: 10 });
        const newYear = cur_date.setFullYear(cur_date.getFullYear()   1);
        setValue(
          new Date(newYear)
            .toLocaleString()
            .replaceAll(".", "/")
            .replace(",", "")
        );
      }
    }
    if (e.ctrlKey && e.key === "ArrowDown") {
      e.preventDefault();
      if (
        inputEl.current.selectionStart >= 0 &&
        inputEl.current.selectionStart <= 1
      ) {
        setSelection({ start: 0, end: 2 });
        let newDate = cur_date.setDate(cur_date.getDate() - 1);
        setValue(
          new Date(newDate)
            .toLocaleString()
            .replaceAll(".", "/")
            .replace(",", "")
        );
      }
      if (
        inputEl.current.selectionStart >= 3 &&
        inputEl.current.selectionStart <= 4
      ) {
        setSelection({ start: 3, end: 5 });
        const newMonth = cur_date.setMonth(cur_date.getMonth() - 1);
        setValue(
          new Date(newMonth)
            .toLocaleString()
            .replaceAll(".", "/")
            .replace(",", "")
        );
      }
      if (
        inputEl.current.selectionStart >= 7 &&
        inputEl.current.selectionStart <= 9
      ) {
        setSelection({ start: 6, end: 10 });
        const newYear = cur_date.setFullYear(cur_date.getFullYear() - 1);
        setValue(
          new Date(newYear)
            .toLocaleString()
            .replaceAll(".", "/")
            .replace(",", "")
        );
      }
    }
  };

  const changeHandler = (e) => {
    setValue(e.target.value);
  };

  return (
    <div className={styles.main}>
      <h1> Frontend Task</h1>
      <p id="name">Abramov David</p>
      <input
        ref={inputEl}
        value={value}
        onChange={changeHandler}
        onKeyDown={keyHandler}
      />
    </div>
  );
};

export default DataInput;

uj5u.com熱心網友回復：

這

  if (
    inputEl.current.selectionStart >= 7 &&
    inputEl.current.selectionStart <= 9
  )

應該

if (
    inputEl.current.selectionStart >= 6 &&
    inputEl.current.selectionStart <= 9
  )

所以范圍應該是 6-9 而不是 7-9

標籤：javascript html 反应 if 语句 输入

上一篇：Python代碼中的錯誤。如何修復跳過？

下一篇：資料庫插入資料，實時渲染到前端