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

Question

当我将 Formik 与 Chakra 输入元素一起使用时，代码不起作用。如果我使用普通输入，formik 的值工作正常，但是当我使用数字输入并在 Formik 中设置初始值时，数字会冻结。我尝试在初始值中设置一个字符串，一个数字，一个在数字中转换的字符串，但结果仍然相同。我发现了其他关于此的老问题，但没有正确的答复。下面按照我的代码：

\n

import { useFormik } from 'formik';\nimport * as yup from 'yup';\nimport { useRouter } from 'next/router';\nimport { useEffect } from 'react';\n\n    import {\n      Link,\n      Container,\n      Box,\n      Input,\n      Button,\n      Text,\n      FormControl,\n      FormLabel,\n      FormHelperText,\n      InputGroup,\n      InputLeftAddon,\n      isSubmitting,\n      NumberInput,\n      NumberInputField,\n      NumberInputStepper,\n      NumberIncrementStepper,\n      NumberDecrementStepper,\n    } from '@chakra-ui/react';\n    \n    import { useAuth } from '../';\n    \n    const validationSchema = yup.object().shape({\n      email: yup\n        .string()\n        .email('E-mail inv\xc3\xa1lido')\n        .required('Preenchimento obrigat\xc3\xb3rio'),\n      password: yup.string().required('Preenchimento obrigat\xc3\xb3rio'),\n      username: yup.string().required('Preenchimento obrigat\xc3\xb3rio'),\n      prefixo: yup.string().required('Preenchimento obrigat\xc3\xb3rio'),\n    });\n    \n    export default function SignUp() {\n      const [auth, { signup }] = useAuth();\n      const router = useRouter();\n    \n      const {\n        values,\n        errors,\n        touched,\n        handleChange,\n        handleBlur,\n        handleSubmit,\n      } = useFormik({\n        // eslint-disable-next-line no-shadow\n        onSubmit: (values) => {\n          alert(JSON.stringify(values, null, 2));\n        },\n    \n        validationSchema,\n        initialValues: {\n          email: '',\n          password: '',\n          username: '',\n          prefixo: Number(''),\n        },\n      });\n    \n      useEffect(() => {\n        auth.user && router.push('/agenda');\n      }, [auth.user, router]);\n    \n      return (\n        <Box\n          bg='var(--color-primary-dark)'\n          w='100%'\n          h='100vh'\n          justifyContent='center'\n          d='flex'\n          alignItems='center'\n        >\n          <Container p={4} w='100vh' centerContent>\n            <Box p={4} mt={8}>\n              <Text color=' white' fontSize='4rem' fontFamily='Rajdhani'>\n                Crie seu cadastro como Tio(a)\n              </Text>\n            </Box>\n            <Box w='100%' d='grid' gridTemplateColumns='1fr 1fr'>\n              <FormControl id='email' p={4} isRequired>\n                <FormLabel fontFamily='Poppins' color='#ddc3ff' fontSize='1.5em'>\n                  Email\n                </FormLabel>\n                <Input\n                  color='white'\n                  textColor='whiteAlpha.900'\n                  fontSize='2xl'\n                  fontFamily='Poppins'\n                  size='lg'\n                  type='email'\n                  height='3.5em'\n                  value={values.email}\n                  onChange={handleChange}\n                  onBlur={handleBlur}\n                />\n                {touched.email && (\n                  <FormHelperText\n                    fontSize='1.0em'\n                    fontFamily='Poppins'\n                    textColor='#e74c3c'\n                  >\n                    {errors.email}\n                  </FormHelperText>\n                )}\n              </FormControl>\n    \n              <FormControl id='password' p={4} isRequired>\n                <FormLabel fontFamily='Poppins' color='#ddc3ff' fontSize='1.5em'>\n                  Senha\n                </FormLabel>\n                <Input\n                  textColor='whiteAlpha.900'\n                  fontSize='2xl'\n                  size='lg'\n                  type='password'\n                  height='3.5em'\n                  value={values.password}\n                  onChange={handleChange}\n                  onBlur={handleBlur}\n                />\n                {touched.password && (\n                  <FormHelperText\n                    fontSize='1.0em'\n                    fontFamily='Poppins'\n                    textColor='#e74c3c'\n                  >\n                    {errors.password}\n                  </FormHelperText>\n                )}\n              </FormControl>\n    \n              <FormControl id='prefixo' p={4} isRequired>\n                <FormLabel fontFamily='Poppins' color='#ddc3ff' fontSize='1.5em'>\n                  Prefixo\n                </FormLabel>\n                <NumberInput\n                  type='prefixo'\n                  name='prefixo'\n                  size='lg'\n                  value={values.prefixo}\n                  onChange={handleChange}\n                  onBlur={handleBlur}\n                  min={1}\n                  max={250}\n                  allowMouseWheel\n                >\n                  <NumberInputField\n                    textColor='whiteAlpha.900'\n                    fontFamily='Poppins'\n                    fontSize='2xl'\n                    height='3.5em'\n                  />\n    \n                  <NumberInputStepper>\n                    <NumberIncrementStepper\n                      bg='green.200'\n                      _active={{ bg: 'green.300' }}\n                    />\n                    <NumberDecrementStepper\n                      bg='pink.200'\n                      _active={{ bg: 'pink.300' }}\n                    />\n                  </NumberInputStepper>\n                </NumberInput>\n                {touched.prefixo && (\n                  <FormHelperText\n                    fontSize='1.0em'\n                    fontFamily='Poppins'\n                    textColor='#e74c3c'\n                  >\n                    {errors.prefixo}\n                  </FormHelperText>\n                )}\n              </FormControl>\n    \n              <FormControl w='100%' id='username' p={4} isRequired>\n                <FormLabel fontFamily='Poppins' color='#ddc3ff' fontSize='1.5em'>\n                  Nome\n                </FormLabel>\n                <InputGroup size='lg'>\n                  <InputLeftAddon\n                    textColor='whiteAlpha.900'\n                    fontFamily='Inter'\n                    bg='#6842c2'\n                    fontSize='2xl'\n                    size='lg'\n                    height='3.5em'\n                    children='Tio(a)/'\n                  />\n                  <Input\n                    textColor='whiteAlpha.900'\n                    fontFamily='Poppins'\n                    fontSize='2xl'\n                    w='100%'\n                    type='username'\n                    height='3.5em'\n                    value={values.username}\n                    onChange={handleChange}\n                    onBlur={handleBlur}\n                  />\n                </InputGroup>\n                {touched.username && (\n                  <FormHelperText\n                    fontSize='1.0em'\n                    fontFamily='Poppins'\n                    textColor='#e74c3c'\n                  >\n                    {errors.username}\n                  </FormHelperText>\n                )}\n              </FormControl>\n            </Box>\n            <Box w='50%' alignItems='center' justifyContent='center' p={4}>\n              <Button\n                fontFamily='Poppins'\n                fontSize='1.2em'\n                size='lg'\n                height='2.5em'\n                colorScheme='blue'\n                width='100%'\n                onClick={handleSubmit}\n                isLoading={isSubmitting}\n              >\n                Cadastrar\n              </Button>\n            </Box>\n    \n            <Link href='/login' color='white' fontFamily='Poppins'>\n              J\xc3\xa1 tem uma conta? Fa\xc3\xa7a o Login\n            </Link>\n          </Container>\n        </Box>\n      );\n    }\n

\n

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