57 lines
1.7 KiB
JavaScript
57 lines
1.7 KiB
JavaScript
import React from "react";
|
||
import { FormControl, FormErrorMessage, HStack, Input, Button } from "@chakra-ui/react";
|
||
|
||
/**
|
||
* 通用验证码输入组件
|
||
*/
|
||
export default function VerificationCodeInput({
|
||
value,
|
||
onChange,
|
||
onSendCode,
|
||
countdown,
|
||
isLoading,
|
||
isSending,
|
||
error,
|
||
placeholder = "请输入6位验证码",
|
||
buttonText = "获取验证码",
|
||
countdownText = (count) => `${count}s`,
|
||
colorScheme = "green",
|
||
isRequired = true
|
||
}) {
|
||
// 包装 onSendCode，确保所有错误都被捕获，防止被 ErrorBoundary 捕获
|
||
const handleSendCode = async () => {
|
||
try {
|
||
if (onSendCode) {
|
||
await onSendCode();
|
||
}
|
||
} catch (error) {
|
||
// 错误已经在父组件处理，这里只需要防止未捕获的 Promise rejection
|
||
console.error('Send code error (caught in VerificationCodeInput):', error);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<FormControl isRequired={isRequired} isInvalid={!!error}>
|
||
<HStack>
|
||
<Input
|
||
name="verificationCode"
|
||
value={value}
|
||
onChange={onChange}
|
||
placeholder={placeholder}
|
||
maxLength={6}
|
||
/>
|
||
<Button
|
||
colorScheme={colorScheme}
|
||
onClick={handleSendCode}
|
||
isDisabled={countdown > 0 || isLoading}
|
||
isLoading={isSending}
|
||
minW="120px"
|
||
>
|
||
{countdown > 0 ? countdownText(countdown) : buttonText}
|
||
</Button>
|
||
</HStack>
|
||
<FormErrorMessage>{error}</FormErrorMessage>
|
||
</FormControl>
|
||
);
|
||
}
|