Problem of courseor React Annex

[charlenef]

Hello, everyone.I'm a newcomer on the web. I can't find any information on my question. The point of my task is that when the ArrowUp is pressed, the first part of the input, where the day is to be spent and increased per unit. 23/10/2021 = constitutional 24/10/2021and the rest of it must remain unchanged, and when ArrowDown is pressed the other way around. Two problems. The first is that when the number is downloaded and added, the cadet is moving to the beginning and release. How do you keep the state of release and prevent the movement of the courseor? The second problem in compressing, for example, ArrowUp, and then ArrowDown, the number is doubled, and the third pressure begins to decrease the number. I mean, when you press down, it's working on the second time. I hope I made an explanation.)

PS: If the inputEl.current.selectionStartran=1 is removed, the state of the allocation remains, but I need to retrieve the position of the cadet to change the remaining parts of the Input.

My code.

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) => {

console.log(e.code);

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() };

});

}

if (e.code === "ArrowDown" / && 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}

value={date_format}

onChange={changeHandler}

onKeyDown={keyHandler}

/>

</div>

);

};
export default DataInput;

[nishika]

1. In order to prevent the movement of the cadet, is needed inside the function keyHandler Call. e.preventDefault()♪ In that case, the cadet won't move anywhere when the arrow is pressed.

2. Synchronization of pressures and actions is due to a different method of steaming inside keyHandler♪

Let's say in the first reinderer the variables are:

milisec = 1609448400000
date = {
  day: 1,
  month: 0,
  year: 2021,
  hour: 0,
  minute: 0,
  second: 0,
}

When the shooter is pressed up, the challenge is:

setMilisec((prevState) => prevState + 86400000);
setDate((prevState) => {
    return { ...prevState, day: new Date(milisec).getDate() };
});

If you set the variables, the code would look like:

setMilisec((prevState) => 1609448400000 + 86400000);
setDate((prevState) => {
    return { ...prevState, day: new Date(1609448400000).getDate() };
});

Two values are therefore disincentived because milisec is fixed to reflect its past value and no date.
In order to correct this, the same value within the two functional challenges can be set:

const keyHandler = (e) => {
  if (e.code === "ArrowUp" && inputEl.current.selectionStart < 3) {
    e.preventDefault();
    let nextMilisec = milisec + 86400000;
    setSelection({ start: 0, end: 2 });
    setMilisec(nextMilisec);
    setDate((prevState) => {
      return { ...prevState, day: new Date(nextMilisec).getDate() };
    });
  }
  if (e.code === "ArrowDown" && inputEl.current.selectionStart < 3) {
    e.preventDefault();
    let nextMilisec = milisec - 86400000;
    setSelection({ start: 0, end: 2 });
    setMilisec(nextMilisec);
    setDate((prevState) => {
      return { ...prevState, day: new Date(nextMilisec).getDate() };
    });
  }
};