使用react中的useEffect钩子检索输入文本并将其保存在变量中的方法

import React, { useState, useEffect } from 'react';

function TextInputWithState() {
  const [inputText, setInputText] = useState(''); // 创建一个状态变量来保存输入的文本
  const [savedText, setSavedText] = useState(''); // 创建一个状态变量来保存检索到的文本

  // 使用useEffect来监听inputText的变化
  useEffect(() => {
    // 当inputText变化时，将其值保存到savedText中
    setSavedText(inputText);
  }, [inputText]); // 依赖数组中包含inputText，这样每当inputText变化时，useEffect就会运行

  return (
    <div>
      <input
        type="text"
        value={inputText}
        onChange={(e) => setInputText(e.target.value)} // 当输入框内容变化时更新inputText状态
      />
      <p>输入的文本: {inputText}</p>
      <p>保存的文本: {savedText}</p>
    </div>
  );
}

export default TextInputWithState;