当我将 Formik 与 Chakra 输入元素一起使用时，代码不起作用。如果我使用普通输入，formik 的值可以正常工作，但是当我使用数字输入并在 Formik 中设置初始值时，数字会冻结。我尝试在初始值中设置一个字符串，一个数字在数字中转换的字符串，但结果仍然相同。我发现了其他关于此的旧问题，但没有正确的答复。下面按照我的代码：
import { useFormik } from 'formik';
import * as yup from 'yup';
import { useRouter } from 'next/router';
import { useEffect } from 'react';
import {
Link,
Container,
Box,
Input,
Button,
Text,
FormControl,
FormLabel,
FormHelperText,
InputGroup,
InputLeftAddon,
isSubmitting,
NumberInput,
NumberInputField,
NumberInputStepper,
NumberIncrementStepper,
NumberDecrementStepper,
} from '@chakra-ui/react';
import { useAuth } from '../';
const validationSchema = yup.object().shape({
email: yup
.string()
.email('E-mail inválido')
.required('Preenchimento obrigatório'),
password: yup.string().required('Preenchimento obrigatório'),
username: yup.string().required('Preenchimento obrigatório'),
prefixo: yup.string().required('Preenchimento obrigatório'),
});
export default function SignUp() {
const [auth, { signup }] = useAuth();
const router = useRouter();
const {
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
} = useFormik({
// eslint-disable-next-line no-shadow
onSubmit: (values) => {
alert(JSON.stringify(values, null, 2));
},
validationSchema,
initialValues: {
email: '',
password: '',
username: '',
prefixo: Number(''),
},
});
useEffect(() => {
auth.user && router.push('/agenda');
}, [auth.user, router]);
return (
<Box
bg='var(--color-primary-dark)'
w='100%'
h='100vh'
justifyContent='center'
d='flex'
alignItems='center'
>
<Container p={4} w='100vh' centerContent>
<Box p={4} mt={8}>
<Text color=' white' fontSize='4rem' fontFamily='Rajdhani'>
Crie seu cadastro como Tio(a)
</Text>
</Box>
<Box w='100%' d='grid' gridTemplateColumns='1fr 1fr'>
<FormControl id='email' p={4} isRequired>
<FormLabel fontFamily='Poppins' color='#ddc3ff' fontSize='1.5em'>
Email
</FormLabel>
<Input
color='white'
textColor='whiteAlpha.900'
fontSize='2xl'
fontFamily='Poppins'
size='lg'
type='email'
height='3.5em'
value={values.email}
onChange={handleChange}
onBlur={handleBlur}
/>
{touched.email && (
<FormHelperText
fontSize='1.0em'
fontFamily='Poppins'
textColor='#e74c3c'
>
{errors.email}
</FormHelperText>
)}
</FormControl>
<FormControl id='password' p={4} isRequired>
<FormLabel fontFamily='Poppins' color='#ddc3ff' fontSize='1.5em'>
Senha
</FormLabel>
<Input
textColor='whiteAlpha.900'
fontSize='2xl'
size='lg'
type='password'
height='3.5em'
value={values.password}
onChange={handleChange}
onBlur={handleBlur}
/>
{touched.password && (
<FormHelperText
fontSize='1.0em'
fontFamily='Poppins'
textColor='#e74c3c'
>
{errors.password}
</FormHelperText>
)}
</FormControl>
<FormControl id='prefixo' p={4} isRequired>
<FormLabel fontFamily='Poppins' color='#ddc3ff' fontSize='1.5em'>
Prefixo
</FormLabel>
<NumberInput
type='prefixo'
name='prefixo'
size='lg'
value={values.prefixo}
onChange={handleChange}
onBlur={handleBlur}
min={1}
max={250}
allowMouseWheel
>
<NumberInputField
textColor='whiteAlpha.900'
fontFamily='Poppins'
fontSize='2xl'
height='3.5em'
/>
<NumberInputStepper>
<NumberIncrementStepper
bg='green.200'
_active={{ bg: 'green.300' }}
/>
<NumberDecrementStepper
bg='pink.200'
_active={{ bg: 'pink.300' }}
/>
</NumberInputStepper>
</NumberInput>
{touched.prefixo && (
<FormHelperText
fontSize='1.0em'
fontFamily='Poppins'
textColor='#e74c3c'
>
{errors.prefixo}
</FormHelperText>
)}
</FormControl>
<FormControl w='100%' id='username' p={4} isRequired>
<FormLabel fontFamily='Poppins' color='#ddc3ff' fontSize='1.5em'>
Nome
</FormLabel>
<InputGroup size='lg'>
<InputLeftAddon
textColor='whiteAlpha.900'
fontFamily='Inter'
bg='#6842c2'
fontSize='2xl'
size='lg'
height='3.5em'
children='Tio(a)/'
/>
<Input
textColor='whiteAlpha.900'
fontFamily='Poppins'
fontSize='2xl'
w='100%'
type='username'
height='3.5em'
value={values.username}
onChange={handleChange}
onBlur={handleBlur}
/>
</InputGroup>
{touched.username && (
<FormHelperText
fontSize='1.0em'
fontFamily='Poppins'
textColor='#e74c3c'
>
{errors.username}
</FormHelperText>
)}
</FormControl>
</Box>
<Box w='50%' alignItems='center' justifyContent='center' p={4}>
<Button
fontFamily='Poppins'
fontSize='1.2em'
size='lg'
height='2.5em'
colorScheme='blue'
width='100%'
onClick={handleSubmit}
isLoading={isSubmitting}
>
Cadastrar
</Button>
</Box>
<Link href='/login' color='white' fontFamily='Poppins'>
Já tem uma conta? Faça o Login
</Link>
</Container>
</Box>
);
}