在React中高效管理动态生成按钮的状态：组件封装与局部状态实践

const { useState } = React;

const Message = ({ message }) => {
  // 使用useState管理当前按钮的文本状态
  const [buttonValue, setButtonValue] = useState("Copy message");

  // 复制到剪贴板的逻辑，并更新当前按钮的文本
  const copyToClipboard = (text) => {
    alert("copied"); // 实际应用中可能不需要alert
    navigator.clipboard.writeText(text);
    setButtonValue("Copied!"); // 更新按钮文本为“Copied!”
  };

  return (
    <div>
      <div>{message}</div>
      <button
        className="copy-to-clipboard-button"
        onClick={() => {
          copyToClipboard(message);
        }}
      >
        {buttonValue} {/* 按钮文本直接绑定到组件的局部状态 */}
      </button>
    </div>
  );
};

const Chat = () => {
  const [myMessages, setMyMessages] = useState([]);
  const [message, setMessage] = useState("");

  const addNewMessage = () => {
    // 只将消息内容添加到数组中
    setMyMessages([...myMessages, message]);
    setMessage(""); // 清空输入框
  };

  const handleChange = (event) => {
    setMessage(event.target.value);
  };

  return (
    <div>
      <div style={{ maxHeight: "80vh", minHeight: "90vh", maxWidth: "96vw" }}>
        {myMessages.map((msg, index) => (
          // 使用Message组件渲染每条消息，并传入消息内容
          // key属性至关重要，用于React识别列表中的每个元素
          <Message key={index} message={msg} />
        ))}
        <input type="text" id="message" name="message" onChange={handleChange} value={message} />
        <button onClick={addNewMessage}>Go!</button>
      </div>
    </div>
  );
};

ReactDOM.createRoot(document.body).render(<Chat />);

const { useState } = React;

// 独立的Message组件，管理自身按钮的状态
const Message = ({ message }) => {
  const [buttonValue, setButtonValue] = useState("Copy message");

  const copyToClipboard = (text) => {
    alert("copied");
    navigator.clipboard.writeText(text);
    setButtonValue("Copied!");
  };

  return (
    <div>
      <div>{message}</div>
      <button
        className="copy-to-clipboard-button"
        onClick={() => {
          copyToClipboard(message);
        }}
      >
        {buttonValue}
      </button>
    </div>
  );
};

// 父组件Chat，负责管理消息列表和输入
const Chat = () => {
  const [myMessages, setMyMessages] = useState([]);
  const [message, setMessage] = useState("");

  const addNewMessage = () => {
    if (message.trim()) { // 避免添加空消息
      setMyMessages([...myMessages, message]);
      setMessage(""); // 清空输入框
    }
  };

  const handleChange = (event) => {
    setMessage(event.target.value);
  };

  return (
    <div>
      <div style={{ maxHeight: "80vh", minHeight: "90vh", maxWidth: "96vw", overflowY: "auto", padding: "10px" }}>
        {myMessages.map((msg, index) => (
          <Message key={index} message={msg} />
        ))}
      </div>
      <div style={{ padding: "10px", borderTop: "1px solid #eee" }}>
        <input type="text" id="message" name="message" onChange={handleChange} value={message} style={{ width: "calc(100% - 70px)", marginRight: "10px", padding: "8px" }} />
        <button onClick={addNewMessage} style={{ padding: "8px 15px" }}>Go!</button>
      </div>
    </div>
  );
};

ReactDOM.createRoot(document.body).render(<Chat />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>