问题描述
当我将 Formik 与 Chakra 输入元素一起使用时,代码不起作用。如果我使用普通输入,formik 的值可以正常工作,但是当我使用数字输入并在 Formik 中设置初始值时,数字会冻结。我尝试在初始值中设置一个字符串,一个数字在 Number 中转换的字符串,但结果仍然相同。我发现了其他关于此的旧问题,但没有正确的答复。下面按照我的代码:
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>
);
}
解决方法
即使我不太喜欢这种方法,我还是通过这样做解决了这个问题:
<Field name='prefixo'>
{({ field,form }) => (
<FormControl id='prefixo'>
<FormLabel htmlFor='prefixo'>Prefixo</FormLabel>
<NumberInput
id='prefixo'
{...field}
onChange={(val) =>
form.setFieldValue(field.name,val)
}
>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
</FormControl>
)}
</Field>
您必须从 Formik 模块中带来 Field
:
import { Field } from 'formik';
来源:https://github.com/chakra-ui/chakra-ui/issues/617#issuecomment-616057308