reactjs - Formik + Chakra UI 输入数字不起作用

Question

当我将 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>
      );
    }

标签： reactjsformikchakrachakra-ui

Answer 1

尽管我不太喜欢这种方法，但我已经通过这样做解决了这个问题：

<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>

你必须Field从 Formik 模块带来：

import { Field } from 'formik';

来源：https ://github.com/chakra-ui/chakra-ui/issues/617#issuecomment-616057308