React Formik with Ant InputNumber type error

Question

我正在用Formik Field实现蚂蚁设计InputNumber。我一直在收到相同的错误，即：Uncaught TypeError: Cannot read property 'type' of undefined。该错误的调用堆栈深入到了formik的某个地方。

我的代码很简单：

import React from 'react';
import { Formik, Form, Field } from 'formik';
import { InputNumber } from 'antd';

export const FormExample = () => (
  <Formik>
    {props => (
      <Form>
        <Field
          as={InputNumber}
          name="number"
        />
      </Form>
    )}
  </Formik>
)

您知道这里发生了什么吗？当我通常不使用InputNumber放置<Field />时，一切正常，但是我想与Formik进行适当的集成。

感谢您的帮助！

Answer 1

您需要将InputNumber的onChange和value“连接”到Formik。

Codesandbox示例：https://codesandbox.io/s/rough-feather-nmm04

export default function App() {
  const handleChange = (name, setFieldValue) => value => {
    setFieldValue(name, value);
  };

  return (
    <Formik initialValues={{ number: 222 }}>
      {props => (
        <Field
          as={InputNumber}
          name="number"
          onChange={handleChange("number", props.setFieldValue)}
          value={props.values.number}
        />
      )}
    </Formik>
  );
}