动态更新按钮文本：根据Textarea内容变化实现交互反馈

import React, { useState, useEffect } from 'react';
import './styles.css'; // 假设存在一些基本样式

export default function App() {
  // 模拟一个初始的“已保存”文本
  const initialSavedContent = "这是一段初始文本，用户可以对其进行编辑。";

  // 状态1: 存储textarea的当前内容
  const [currentText, setCurrentText] = useState(initialSavedContent);
  // 状态2: 存储textarea的已保存内容（用于比较）
  const [savedText, setSavedText] = useState(initialSavedContent);
  // 状态3: 存储按钮的文本
  const [buttonText, setButtonText] = useState("发送"); // 初始状态为“发送”

  // 使用useEffect来监听currentText和savedText的变化
  // 当这两个值发生变化时，重新评估按钮的文本
  useEffect(() => {
    if (currentText !== savedText) {
      setButtonText("保存更改");
    } else {
      setButtonText("发送");
    }
  }, [currentText, savedText]); // 依赖项数组，当currentText或savedText变化时执行

  // textarea的onChange事件处理函数
  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setCurrentText(e.target.value);
  };

  // 按钮的onClick事件处理函数（模拟保存操作）
  const handleSave = () => {
    // 将当前文本设置为新的已保存文本
    setSavedText(currentText);
    // 提示用户保存成功
    alert("更改已保存！");
    // useEffect会自动将buttonText更新为“发送”
  };

  // 判断按钮是否应该被禁用
  const isButtonDisabled = currentText === savedText;

  return (
    <div
      className="App"
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        margin: "20px auto",
        width: "300px",
        padding: "20px",
        border: "1px solid #ccc",
        borderRadius: "8px",
        boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
      }}
    >
      <h2>文本编辑与保存</h2>
      <textarea
        rows={8}
        cols={40}
        value={currentText} // 将textarea绑定到currentText状态，使其成为受控组件
        onChange={handleChange}
        style={{
          width: "100%",
          padding: "10px",
          marginBottom: "15px",
          border: "1px solid #ddd",
          borderRadius: "4px",
          resize: "vertical"
        }}
        placeholder="请输入文本..."
      />
      <button
        onClick={handleSave}
        disabled={isButtonDisabled} // 根据内容是否更改来禁用按钮
        style={{
          padding: "10px 20px",
          fontSize: "16px",
          backgroundColor: isButtonDisabled ? "#cccccc" : "#007bff",
          color: "white",
          border: "none",
          borderRadius: "5px",
          cursor: isButtonDisabled ? "not-allowed" : "pointer",
          transition: "background-color 0.3s ease"
        }}
      >
        {buttonText}
      </button>
      <p style={{ marginTop: '20px', fontSize: '14px', color: '#666' }}>
        当前文本与已保存文本{isButtonDisabled ? '一致' : '不一致'}。
      </p>
    </div>
  );
}