反应中输入字段插入符号位置问题

Question

大家好

我是网络开发新手。我有一项任务是通过单击 'ArrowUp' 按钮来增加输入字段中字符串第一部分的天数。此外，必须选择可变部分（天）。

问题是当我单击“ArrowUP”插入符号 (|) return 到字符串的起始位置并且 selected(setSelectedRange) 被禁用时。如何固定选择位置并增加天数？希望我能够解释这个问题。

PS: 如果我删除 inputEl.current.selectionStart === 1，它似乎有效，但我需要检查插入符位置以更改 [=13 的其他部分=]

我的代码

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

我找到问题了

需要像inputEl.current.selectionStart < 2
在更改 milisec 状态之前，我需要手动更改它。

Answer 2

其实我不习惯用selectionStart & selectionEnd

但我认为...如果您按 ArrowUp 键，event.preventDefault() 可能会起作用。

反应中输入字段插入符号位置问题

Input field caret position problem in react

html

javascript

css

input

reactjs