Next.js与React中自定义Button组件onClick双逻辑执行问题咨询

你当前的问题核心有两个：一是没正确调用传入的onClick业务函数，二是缺少状态管理来控制按钮的加载/禁用UI变化。下面是具体的解决方案：

关键修改步骤 #

1. 用useState给Button组件添加状态，管理按钮的处理状态（加载/禁用）
2. 封装点击事件函数，先执行组件内部的UI状态更新，再调用外部传入的业务逻辑
3. 根据状态动态调整按钮的样式、内容（比如显示加载动画）和禁用状态，防止重复点击

修改后的完整Button组件代码 #

import { useState } from 'react';

interface ButtonProps {
    primary?: boolean;
    backgroundColor?: string;
    size?: 'small' | 'medium' | 'large';
    label: string;
    styling: string;
    type: 'load' | 'disable'; // 用联合类型替代字符串，避免类型错误
    onClick?: () => Promise<void> | void; // 支持异步业务函数
}

const main_btn = "bg-main text-white hover:bg-transparent hover:text-main";
const secondary_btn = "bg-transparent text-main hover:bg-main hover:text-white";

const sm = 'py-[0.25rem] px-[0.5rem] text-sm';
const md = 'py-[0.375rem] px-[0.75rem] text-base';
const lg = 'py-[0.5rem] px-[0.1rem] text-lg';

const Button = ({
    primary = false,
    size = 'medium',
    backgroundColor,
    label,
    type,
    styling,
    onClick,
}: ButtonProps) => {
    const [isProcessing, setIsProcessing] = useState(false);
    const mode = primary ? main_btn : secondary_btn;
    const sz = size === "medium" ? md : size === "small" ? sm : lg;

    const handleClick = async () => {
        // 第一步：执行组件内部UI逻辑，更新状态
        setIsProcessing(true);

        try {
            // 第二步：执行外部传入的业务逻辑，支持异步
            if (onClick) {
                await onClick();
            }
        } finally {
            // 异步逻辑完成后，根据按钮类型决定是否恢复状态
            if (type !== 'disable') {
                setIsProcessing(false);
            }
        }
    };

    return (
        <button
            type="button"
            className={`
                ${sz} rounded ${mode} w-full text-center border border-main hover:cursor-pointer ${styling}
                ${isProcessing ? 'opacity-70 cursor-not-allowed' : ''}
            `}
            style={{ backgroundColor, borderColor: backgroundColor }}
            onClick={handleClick}
            disabled={isProcessing} // 禁用按钮防止重复点击
        >
            {/* 加载状态下显示spinner，否则显示原标签 */}
            {isProcessing && type === 'load' ? (
                <div className="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
            ) : (
                label
            )}
        </button>
    );
};

export default Button;

调用示例（login.tsx） #

// 模拟异步登录业务逻辑
const loggingin = async () => {
    await new Promise(resolve => setTimeout(resolve, 2000));
    // 这里写实际的登录请求逻辑
};

<Button 
    label="Iniciar sesión" 
    primary={true} 
    size="medium" 
    styling="mb-8" 
    type="load" 
    onClick={loggingin} 
/>

为什么之前的代码无法生效？ #

你之前的代码里props.onClick;只是引用了函数但没有调用，正确写法应该是props.onClick?.()；同时缺少状态管理，点击后无法触发UI更新。现在的实现既保证了内部UI状态的实时变化，又能完整执行外部业务逻辑，还处理了异步场景下的状态恢复。

内容的提问来源于stack exchange，提问作者Fabian Svensson