React文本域内容变更检测与按钮动态更新教程

import React, { useState } from "react";

export default function App() {
  const [buttonText, setButtonText] = useState("发送"); // 按钮的初始文本
  // ... 其他代码
}

function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
  // 当文本域内容发生变化时，将按钮文本更新为“保存更改”
  setButtonText("保存更改");
}

return (
  <div className="App">
    <textarea rows={6} onChange={handleChange} />
    {/* ... 按钮 */}
  </div>
);

function handleClick() {
  // 假设这里执行了保存操作
  // 保存完成后，将按钮文本重置为“发送”
  setButtonText("发送");
}

return (
  <div className="App">
    {/* ... 文本域 */}
    <button style={{ margin: "10px" }} onClick={handleClick}>
      {buttonText}
    </button>
  </div>
);

import "./styles.css"; // 假设有基本的样式文件
import React, { useState } from "react";

export default function App() {
  // 使用useState管理按钮的文本状态，初始值为“发送”
  const [buttonText, setButtonText] = useState("发送");
  // （可选）如果需要更精细的比较，可以存储上一次保存的文本
  // const [savedText, setSavedText] = useState("");
  // const [currentText, setCurrentText] = useState("");

  /**
   * 处理文本域内容变化的函数。
   * 当文本域内容发生变化时，将按钮文本更新为“保存更改”。
   * @param e React的文本域变化事件对象
   */
  function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
    // setCurrentText(e.target.value); // 如果需要存储当前文本
    // 只有当当前文本与上次保存文本不同时才改变按钮文本，可以加入更复杂的逻辑
    // if (e.target.value !== savedText) {
    setButtonText("保存更改");
    // } else {
    // setButtonText("发送"); // 如果改回去和原来一样，按钮也改回去
    // }
  }

  /**
   * 处理按钮点击事件的函数。
   * 模拟保存操作，并将按钮文本重置为“发送”。
   */
  function handleClick() {
    // 实际应用中，这里会触发数据保存到后端或本地存储的逻辑
    console.log("执行保存操作...");
    // setSavedText(currentText); // 更新保存的文本
    setButtonText("发送"); // 保存完成后，按钮文本重置
    alert("内容已保存！");
  }

  return (
    <div
      className="App"
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        marginLeft: "auto",
        marginRight: "auto",
        width: "300px", // 增加宽度以便更好展示
        padding: "20px",
        border: "1px solid #eee",
        borderRadius: "8px",
        boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
      }}
    >
      <h3>文本域内容编辑示例</h3>
      <textarea
        rows={8}
        cols={40} // 增加列数
        onChange={handleChange}
        placeholder="请在此输入或修改文本..."
        style={{
          width: "calc(100% - 20px)",
          padding: "10px",
          marginBottom: "15px",
          border: "1px solid #ccc",
          borderRadius: "4px",
          fontSize: "1rem"
        }}
      />
      <button
        style={{
          padding: "10px 20px",
          fontSize: "1rem",
          backgroundColor: buttonText === "保存更改" ? "#007bff" : "#6c757d", // 根据状态改变按钮颜色
          color: "white",
          border: "none",
          borderRadius: "5px",
          cursor: "pointer",
          transition: "background-color 0.3s ease"
        }}
        onClick={handleClick}
      >
        {buttonText}
      </button>
    </div>
  );
}