Дополнить программу так, чтобы в previousInputValue сохранялось предыдущее введенное значение, с помощью useRef

Рейтинг: 1Ответов: 1Опубликовано: 15.01.2023

Дан следующий код:

import { useState, useEffect, useRef } from "react";

function App() {
  const [inputValue, setInputValue] = useState("");
  const previousInputValue = useRef("");

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h2>Current Value: {inputValue}</h2>
      <h2>Previous Value: {previousInputValue.current}</h2>
    </>
  );
}

Также интересно, обязательно ли использовать useEfect, или можно обойтись без него?

reactjs react-hook
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Вот компонент с реализацией возможности запоминания предыдущего состояния компонента с использованием Ref и без него:

function App() {
  const [inputValue, setInputValue] = useState("");
  const [prevInputValue, setPrevInputValue] = useState("");

  const prevRef = useRef();
  useEffect(() => {
      prevRef.current = inputValue;
  }, [inputValue]);

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(prev => {
          setPrevInputValue(prev); // Предыдущее состояние
          return e.target.value; // Устанавливаем текущее
        })}
      />
      <h2>Current Value: {inputValue}</h2>
      <h2>Previous Value: {prevInputValue}</h2>
      <h2>Previous Value vs Ref: {prevRef.current}</h2>
    </>
  );
}