React如何禁用按钮并在事件处理完后启用按钮？

admin

我想用React 18实现一个按钮组件，在点击时将按钮禁用，处理完事件后自动按钮启用。我想这是一个很简单的功能，初始代码如下：

1. import React, { useState } from "react";
   
2. 
   
3. export function Button(props: any) {
   
4.   const { children, ...properties } = props;
   
5.   const clickEvent: React.MouseEventHandler<HTMLButtonElement> = props.onClick;
   
6. 
   
7.   const [loading, setLoading] = useState(false);
   
8. 
   
9.   function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
   
10.     setLoading(true);
    
11.     clickEvent(event);
    
12.     setLoading(false);
    
13.   }
    
14. 
    
15.   return (
    
16.     <button disabled={loading} onClick={handleClick}>
    
17.       {children}
    
18.     </button>
    
19.   );
    
20. }

复制代码