时间戳

首页 > 解决方案 > 反应中的输入字段插入符号位置问题

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

问题描述

大家好。

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

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

PS：如果我删除inputEl.current.selectionStart === 1，它似乎工作，但我需要检查插入符号的位置来改变其他部分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;

标签： javascripthtmlcssreactjsinput

解决方案

我解决了这个问题。

  1. 需要设置间隔inputEl.current.selectionStart < 2
  2. 在更改状态 milisec 之前，我需要手动更改。

推荐阅读