Formik、Antd 和 Yup：InputNumber (antd) 字段出错答案

【问题标题】：Formik, Antd & Yup: Error with InputNumber (antd) fieldFormik、Antd 和 Yup：InputNumber (antd) 字段出错
【发布时间】：2020-06-29 02:00:05
【问题描述】：

尝试在 Antd 中使用 Formik 和 Yup，但遇到了简单的错误。我得到了下面列出的代码。电子邮件字段（输入）工作正常，但是当我更改年龄字段（输入编号）时，formik 出现错误：“TypeError：无法读取未定义的属性‘类型’”。 Сan不明白它为什么会发生，我应该在哪里找到这个未定义的类型属性。试图为“年龄”（InputNumber）设置 type=number 它没有帮助 - 我得到了同样的错误。谁能知道如何在 antd 中使用 Formik 和 Yup，并可以提供帮助？

import React from 'react';
import * as ReactDOM from 'react-dom';
import { Form, Input, InputNumber, Button } from 'antd';
import { withFormik, FormikErrors, FormikProps } from "formik";
import * as Yup from 'yup';

class RegForm extends React.Component {
  constructor(props) {
      super(props);
  }

  render(){
    const { values, handleChange, handleBlur, handleSubmit, touched, errors } = this.props;
    return(
     <Form onSubmit={handleSubmit}>
       <Form.Item
          help={touched.email && errors.email ? errors.email : ""}
          validateStatus={touched.email && errors.email ? "error" : "success"}
          label="E-mail"
          name="email"
       >
         <Input
            placeholder="E-mail"
            value={values.email}
            onChange={handleChange}
            onBlur={handleBlur}
          />
       </Form.Item>
       <Form.Item
          help={touched.age && errors.age ? errors.age : ""}
          validateStatus={touched.age && errors.age ? "error" : "success"}
          label="Age"
          name="age"
        >
          <InputNumber
             value={values.age}
             onChange={handleChange}
             onBlur={handleBlur}
          />
        </Form.Item>
        <Form.Item>
           <Button
              type="primary"
              htmlType="submit"
              className="form-submit-button"
            >
            Send
            </Button>
         </Form.Item>
     </Form>
    );
  }
}


const vSchema = Yup.object().shape({
  email: Yup.string()
        .email('Not valid mail')
        .required('Required'),
  age: Yup.number()
    .test({
      message:'From 18 to 65',
      test: value => {
        return (value >= 18 && value <=65)
      },
    })
    .required('Required')
});


const FormView = withFormik({
    vSchema,
    mapPropsToValues: () => ({ email: '', age: ''}),
    handleSubmit: async (values, { props, setErrors }) => {
        const errors = await props.submit(values);
        if (errors) {
            setErrors(errors);
        }
    }
})(RegForm);


ReactDOM.render(<FormView />, document.getElementById('root'));

【问题讨论】：

onChange={value => setFieldValue('age', value)}

标签： javascript reactjs antd formik yup

【解决方案1】：

看起来像 Ant Design 的一个怪癖，实际上当您执行解决方法 onChange={value => setFieldValue('age', value)} 时它确实有效。为了让您在使用 Formik 和 Ant Design 时生活更轻松，您可以试试formik-antd。该库无需编写所有绑定，并且通常在 IMO 上运行良好。

【讨论】：