輸入字段插入符號 position 反應中的問題

Question

大家好

我是 web 開發人員的新成員。 我有一項任務是通過單擊“ArrowUp”按鈕來增加輸入字段中字符串第一部分的天數。 此外，必須選擇可變部分（天）。

問題是當我單擊“ArrowUP”插入符號 (|) 返回到字符串的開頭 position 並且selected(setSelectedRange)被禁用時。 如何固定選擇position並增加天數？ 希望我能夠解釋這個問題。

PS：如果我刪除inputEl.current.selectionStart === 1 ，它似乎有效，但我需要檢查插入符號 position 以更改input ()

我的代碼

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

const cur_date = new Date();

const def_day = cur_date.getDate();
const def_month = cur_date.getMonth();
const def_year = cur_date.getFullYear();
const def_hour = cur_date.getHours();
const def_minute = cur_date.getMinutes();
const def_seconds = cur_date.getSeconds();

/* const months = {
  1: "January",
  2: "February",
  3: "March",
  4: "April",
  5: "May",
  6: "June",
  7: "July",
  8: "August",
  9: "September",
  10: "October",
  11: "November",
  12: "December",
}; */

const DataInput = () => {
  const [milisec, setMilisec] = useState(cur_date.valueOf());
  const [date, setDate] = useState({
    day: def_day,
    month: def_month,
    year: def_year,
    hour: def_hour,
    minute: def_minute,
    second: def_seconds,
  });

  const { day, month, year, hour, minute, second } = date;
  const date_format = `${("0" + day).slice(
    -2
  )}/${month}/${year} ${hour}:${minute}:${second}`;

  const inputEl = useRef();
  const [selection, setSelection] = useState({});

  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.code === "ArrowUp" && inputEl.current.selectionStart === 1) {
      setSelection({ start: 0, end: 2 });
      setMilisec((prevState) => prevState + 86400000);
      setDate((prevState) => {
        return { ...prevState, day: new Date(milisec).getDate() };
      });
    }
  };

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

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

export default DataInput;

Answer 1

我解決了這個問題。

1. 需要像inputEl.current.selectionStart < 2一樣設置間隔
2. 在更改 milisec 狀態之前，我需要手動更改它。

Answer 2

其實我不習慣用selectionStart & selectionEnd

但我認為...如果您按 ArrowUp 鍵，event.preventDefault() 可能會起作用。