如何解决按钮重复点击

问题背景

在日常开发中，我们经常会遇到这样的场景：

• 用户疯狂点击提交按钮
• 表单重复提交导致数据异常
• 批量操作按钮被连续触发
  这些问题如果处理不当，轻则影响用户体验，重则可能造成数据错误。

解决方案

我们可以封装一个自定义 Hook

import {useState,useCallback,useRef} from 'react'
 
function useLock(asyncFn) {
    const [loading, setLoading] = useState(false)
    const asyncFnRef = useRef(null)
    asyncFnRef.current = asyncFn
    const run = useCallback(async (...args) => {
        if(loading) return
        setLoading(true)
        try {
            await asyncFnRef.current(...args)
        } finally {
            setLoading(false)
        }
    }, [loading])
 
    return [loading,run]
}

然后封装一个通用的 Button 组件

import {Button as AntButton} from 'antd'
 
const Button = ({onClick,...props})=>{
    const {loading, run} = useLock(onClick || (()=> {}))
    return <AntButton loading={loading} {...props} onClick={run}></button>
}

使用示例

const Demo = () => {
    const handleSubmit = async () => {
        // 模拟异步请求
        await new Promise(resolve => setTimeout(resolve, 2000))
        console.log('提交成功')
    }
 
    return (
        <Button onClick={handleSubmit}>
            提交
        </Button>
    )
}

方案优势

• 零侵入性 ：使用方式与普通按钮完全一致
• 自动处理 ：自动管理 loading 状态，无需手动控制