React useState: isActive和hasActivatedOnce状态

import React, { useState } from 'react';

function ToggleButton() {
  const [isActive, setIsActive] = useState(false);
  const [hasActivatedOnce, setHasActivatedOnce] = useState(false);

  const handleClick = () => {
    setIsActive(!isActive);
    if (!hasActivatedOnce) {
      setHasActivatedOnce(true);
    }
  };

  return (
    <div>
      <button onClick={handleClick}>
        {isActive ? 'Active' : 'Inactive'}
      </button>
      {hasActivatedOnce && <p>Button has been activated at least once.</p>}
    </div>
  );
}

export default ToggleButton;

const handleClick = () => {
  setIsActive(prevIsActive => !prevIsActive);
  setHasActivatedOnce(prevHasActivatedOnce => !prevHasActivatedOnce);
};