React Hooks - значение useState не может измениться

Question

Проблема

Я хочу получить value обновленного состояния перехватов при каждом нажатии , вводе .Но я всегда получаю начальное значение вместо обновленного.

CODE

import React, { useState } from "react";
import ReactDOM from "react-dom";
import ContentEditable from "react-contenteditable";

const ItemCol = props => {
  const [value, setValue] = useState("Initial Value");

  const onChange = event => {
    setValue(event.target.value);
    console.log("onChange: " + value);
  };

  const keyDown = event => {
    if (event.keyCode === 13) {
      event.preventDefault();
      //Value should be changed, but did not change
      console.log("Enter Pressed: " + value);
    }
  };

  return (
    <ContentEditable
      html={value}
      onKeyDown={React.useCallback(keyDown)}
      onChange={React.useCallback(onChange)}
    />
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<ItemCol />, rootElement);

CodeSandBox.io: https://codesandbox.io/embed/pensive-worker-31l3r

Примечание: keyCode 13 - это Enter.

Примечание 2: Я использую реактивно-зависимые зависимости.(https://www.npmjs.com/package/react-contenteditable)

Пожалуйста, помогите мне, так как у меня есть эта проблема в течение нескольких часов. Спасибо!

Answer 1

Компонент ContentEditable, похоже, запоминает метод onKeydown и, следовательно, всякий раз, когда вы вызываете его, он печатает значение из своего начального закрытия, поэтому у вас всегда есть начальное значение.

Для решения этой проблемы закрытияВы можете сохранить значение в ссылке и изменить его

const ItemCol = props => {
  const [value, setValue] = useState("Initial Value");
  const valRef = useRef(value);
  const onChange = event => {
    setValue(event.target.value);
    valRef.current = event.target.value;
  };

  const keyDown = event => {
    if (event.keyCode === 13) {
      event.preventDefault();
      //Value should be changed, but did not change
      console.log("Enter Pressed: " + valRef.current);
    }
  };

  return (
    <ContentEditable
      html={value}
      onKeyDown={keyDown}
      onChange={React.useCallback(onChange)}
    />
  );
};

Рабочая демонстрация

Answer 2

@ Майкл Харли, проблема была в закрытии или в способе установки реагирующей на контент функции onkeydown внутри реагирующей на содержимое редактируемой.

Рабочая демоверсия: - https://codesandbox.io/embed/elated-bohr-jeu4u?fontsize=14

Ресурс: - https://overreacted.io/a-complete-guide-to-useeffect/