सभी को नमस्कार। मैं वेब डेवलपर में नया हूं। मैं बस समस्या को नहीं समझ सकता। मेरा काम ctr + ArrowUp (वृद्धि) और ctr + ArrowDown (घटता) के संयोजन का उपयोग करके इनपुट (दिन, महीने और वर्ष) के हिस्सों को बदलना है। इसके अलावा परिवर्तनीय भाग का चयन किया जाता है - यह कर्सर की स्थिति को ट्रैक करके प्राप्त किया जाता है (चयन प्रारंभ)। कोड काम करता है, लेकिन जब मैं किसी कारण से "वर्ष" को बढ़ाना या घटाना चाहता हूं तो "ऑनकेडाउन" को केवल एक बार निष्पादित किया जाता है और अन्य बटन प्रेस का कोई प्रभाव नहीं पड़ता है। ऐसा क्यों होता है?

सैंडबॉक्स स्निपेट

मेरा कोड

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;
0
David Abramov 7 नवम्बर 2021, 00:21

1 उत्तर

सबसे बढ़िया उत्तर

NS

  if (
    inputEl.current.selectionStart >= 7 &&
    inputEl.current.selectionStart <= 9
  )

होना चाहिए

if (
    inputEl.current.selectionStart >= 6 &&
    inputEl.current.selectionStart <= 9
  )

इसलिए सीमा 6-9 होनी चाहिए न कि 7-9

0
Gabriele Petrioli 7 नवम्बर 2021, 20:35
बहुत बहुत धन्यवाद, समस्या हल हो गई।
 – 
David Abramov
7 नवम्बर 2021, 20:42