Не работает событие OnChange и Input в React

Question

Всем привет. Помогите решить вопрос. Есть задача - при нажатии кнопки "вверх" меняется дата, а конкретно дни. Всё работает, но мучает вопрос почему не работает OnChange? Нужно, чтобы в инпут можно было вводить символы.

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 [mutableDate, setMutableDate] = useState(cur_date);

  const date_format = cur_date
    .toLocaleString()
    .replaceAll(".", "/")
    .replace(",", "");

  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();
      console.log("Key Confirm");
      if (inputEl.current.selectionStart < 3) {
        console.log("Select Confirm");
        setSelection({ start: 0, end: 2 });
        setMutableDate(cur_date.setDate(cur_date.getDate() + 1));
      }
    }
  };

  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;

Answer 1

Вопрос решил. Убрал лишний:

state 'const [mutableDate, setMutableDate] = useState(cur_date);

Создал state value:

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 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) => {
    console.log(date_format);
    if (e.ctrlKey && e.key === "ArrowUp") {
      e.preventDefault();
      console.log("Key Confirm");
      if (inputEl.current.selectionStart < 3) {
        console.log("Select Confirm");
        setSelection({ start: 0, end: 2 });
        cur_date.setDate(cur_date.getDate() + 1);
        setValue(date_format);
      }
    }
  };

  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;

БЛОГ НА HUSL

Не работает событие OnChange и Input в React

Ответы (1 шт):