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

Formik 是一个流行的表单管理库，它简化了React应用程序中的表单状态管理和验证。Chakra UI 是一个React组件库，提供了丰富的UI组件，用于构建响应式和可访问的Web应用程序。当你在使用Formik与Chakra UI结合时，可能会遇到输入数字不起作用的问题。这通常是由于以下几个原因造成的：

基础概念

Formik: 用于管理表单状态和验证。
Chakra UI: 提供了一系列React组件，用于构建用户界面。

可能的原因

类型不匹配: Formik默认处理字符串类型的值，而数字输入需要特定的处理。
组件属性设置不当: Chakra UI的输入组件可能需要特定的属性来正确处理数字输入。
事件处理问题: 输入事件可能没有正确地更新Formik的值。

解决方案

为了解决这个问题，你可以采取以下步骤：

步骤1: 设置正确的组件属性

确保Chakra UI的Input组件设置了type="number"，这样浏览器就知道这是一个数字输入框。

import { Input } from "@chakra-ui/react";
import { useFormikContext } from "formik";

function NumberInput({ name }) {
  const { setFieldValue } = useFormikContext();

  return (
    <Input
      type="number"
      name={name}
      onChange={(event) => {
        setFieldValue(name, parseFloat(event.target.value));
      }}
    />
  );
}

步骤2: 自定义输入组件

创建一个自定义的输入组件，该组件将处理数字输入，并确保Formik的值被正确更新。

import React from "react";
import { Input } from "@chakra-ui/react";
import { useFormikContext } from "formik";

function NumberInput({ name }) {
  const { setFieldValue } = useFormikContext();

  return (
    <Input
      type="number"
      name={name}
      onChange={(event) => {
        const value = event.target.value;
        if (value === "" || !isNaN(value)) {
          setFieldValue(name, parseFloat(value));
        }
      }}
    />
  );
}

export default NumberInput;

步骤3: 在Formik表单中使用自定义组件

在你的Formik表单组件中，使用这个自定义的NumberInput组件来代替默认的输入组件。

import React from "react";
import { Formik, Form, Field } from "formik";
import NumberInput from "./NumberInput";

function MyForm() {
  return (
    <Formik initialValues={{ numberField: 0 }} onSubmit={(values) => console.log(values)}>
      <Form>
        <Field name="numberField" component={NumberInput} />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
}

export default MyForm;