React JS - 使用文本区域控件并尝试在 onChange 事件触发时保留以前的文本

Question

在我的 React 组件中，我有

textarea

作为输入控件。该控件显示存储在数据库列中的文本。用户可以从前端完全或部分更新该内容并更新数据库列中的值。

我的任务是保留以前的内容，并从此

textarea

控件保存新内容（全部或部分）。

我正在使用两个

useState

属性和

onChange()

事件来设置或保留以前的和新的文本，并尝试将它们保存在数据库表中。但不知何故无法保存或保留以前的文本。

我怎样才能实现这个目标？

这是我到目前为止已经实现的代码。

import React, { useState } from 'react';

const App = () => {
    const [text, setNewText] = useState('');
    const [prevText, setPrevText] = useState('');
}

return (
    <div>
      <textarea
        value={text}
        onChange={(name, value) => {
           const newText = value;
           setPrevText(text);
           setNewText(newText);
        }}
        placeholder="Type something..."
      ></textarea>
      <div>
        <p>Previous Text:</p>
        <p>{prevText}</p>
      </div>
      <div>
        <p>New Text:</p>
        <p>{text}</p>
      </div>
    </div>
);

export default App;

Answer 1

您获取当前文本的方式不正确

应该是：

onChange={(e) => {
  const newText = e.target.value;
  setPrevText(text);
  setNewText(newText);
}}

完整代码：

import React, { useState } from "react";

const App = () => {
  const [text, setNewText] = useState("");
  const [prevText, setPrevText] = useState("");

  return (
    <div>
      <textarea
        value={text}
        onChange={(e) => {
          const newText = e.target.value;
          setPrevText(text);
          setNewText(newText);
        }}
        placeholder="Type something..."
      ></textarea>
      <div>
        <p>Previous Text:</p>
        <p>{prevText}</p>
      </div>
      <div>
        <p>New Text:</p>
        <p>{text}</p>
      </div>
    </div>
  );
};

export default App;