Question

我正在与Formik Field一起实施蚂蚁设计.。我不断遇到相同的错误，即：InputNumber。该错误的调用堆栈深入到了formik的某个地方。

我的代码很简单：

Uncaught TypeError: Cannot read property 'type' of undefined

您知道这里发生了什么吗？当我正常使用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时，一切正常，但是我想与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>
  );
}

Answer 2

使用Formiks setFieldValue 函数设置输入字段的值来设置它的值。

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

使用Ant InputNumber类型错误来反应Formik

2 个答案: