在React Typescript中重新加载事件更改按钮

import React, { useState } from 'react';

interface ButtonProps {
  onClick: () => void;
}

const ReloadButton: React.FC<ButtonProps> = ({ onClick }) => {
  const [isLoading, setIsLoading] = useState(false);

  const handleClick = () => {
    setIsLoading(true);
    onClick();
    // 在这里执行重新加载或更新操作
    // 可以使用异步操作，例如发送网络请求或获取数据
    // 完成后更新按钮状态
    setIsLoading(false);
  };

  return (
    <button onClick={handleClick} disabled={isLoading}>
      {isLoading ? 'Loading...' : 'Reload'}
    </button>
  );
};

export default ReloadButton;

import React from 'react';
import ReloadButton from './ReloadButton';

const ParentComponent: React.FC = () => {
  const handleButtonClick = () => {
    // 在这里处理重新加载事件的逻辑
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <ReloadButton onClick={handleButtonClick} />
    </div>
  );
};

export default ParentComponent;