Event "OnKeyDown's incorrectly working in react.
-
Hello, everyone. I'm a newcomer on the web. I can't understand the problem. My job is to change the parts of the Input (day, month and year), using a combination of ctr + ArrowUp (increase) and ctr + ArrowDown (decrease). Also, the changing part of the input should be allocated - this is achieved by tracking the position of the cadet (selectionStart). The code is working, but when I want to increase or reduce the weather for some reason, the OnKeyDown Eve is implemented only once, and the subsequent pressures of the other buttons do not result. Why is this happening?
https://codesandbox.io/s/frontend-task-v9d4m
My code.
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;
-
Interval should be 6-9, not 7-9.
