Formik，Antd & Yup: InputNumber (antd)字段错误

Question

尝试将Formik和Yup与Antd一起使用，但仍停留在简单的错误上。我有下面列出的代码。电子邮件字段(输入)工作正常，但当我更改年龄字段(InputNumber)时，我在formik中得到错误："TypeError:无法读取未定义的属性‘类型’“。С无法理解为什么会发生这种情况，以及我应该在哪里找到这个未定义的类型属性。尝试将type=number设置为“年龄”(InputNumber)无济于事--我得到了同样的错误。有谁知道如何在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'));

Answer 1

看起来像是蚂蚁设计的怪癖，当你做onChange={value => setFieldValue('age', value)}时，它确实起作用了。为了让您在使用Formik和Ant Design时更加轻松，您可以尝试使用formik-antd。这个库消除了编写所有绑定的需要，通常可以很好地工作在IMO中。