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

Question

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

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

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