Formik和Material-UI

Question

我正在尝试将Formik与Material-UI文本字段一起使用。如下所示：

import TextField from '@material-ui/core/TextField';
import {
  Field,
  FieldProps,
  Form,
  Formik,
  FormikErrors,
  FormikProps
} from 'formik';
import React, { Component } from 'react';

interface IMyFormValues {
  firstName: string;
}

class CreateAgreementForm extends Component<{}> {
  public render() {
    return (
      
        My Example
         alert(JSON.stringify(values))}
          // tslint:disable-next-line:jsx-no-lambda
          validate={(values: IMyFormValues) => {
            const errors: FormikErrors = {};
            if (!values.firstName) {
              errors.firstName = 'Required';
            }
            return errors;
          }}
          // tslint:disable-next-line:jsx-no-lambda
          render={(formikBag: FormikProps) => (
            
              ) => (
                  
                )}
              />
            
          )}
        />
      
    );
  }
}

export default CreateAgreementForm;

我希望Formik负责验证，而Material-UI负责外观。我想将errors.firstName传递给TextField组件，但是错误没有正确显示。我如何修复它，使其仍然清晰可读？我不想编写自己的TextField组件。

Answer 1

正如评论中提到的，实际上实现“包装器”组件可能是一个好主意，就像他们在来自Formik或ReactFinalForm的示例中所做的那样：

https://github.com/stackworx/formik-material-ui/tree/master/src

https://github.com/final-form/react-final-form#material-ui-10

想法是一样的:实现自定义的“包装器”组件来包装Material-UI组件，并映射Formik或ReactFinalForm API属性。

这种方法的优点是将两个框架之间的映射集中在一个地方，这样您就不会每次都重复映射，如果其中一个框架引入了破坏性的更改，您只需更改那些自定义的“包装器”组件。

Answer 2

我认为你不需要另一个库，甚至不需要创建自己的包装器，我认为你需要稍微调整一下你的代码。

您遇到的一个问题是，您没有在材料TextField中传递onChange函数，因此firstName的表单值始终为空，因此即使您输入了名称，也总是会收到错误。尝试在您的TextField和onChange函数中添加一个名称或id，如下所示：

(
    
    )}
/>

Answer 3

你可以试试这个：

https://github.com/daixianceng/formik-material-fields

安装：

npm install --save formik-material-fields

用法：

import React, { Component } from 'react';
import { Formik, Form } from 'formik';
import * as Yup from 'yup';
import { FormikTextField } from 'formik-material-fields';

const validationSchema = Yup.object().shape({
  username: Yup.string().required(),
});

const initialValues = {
  username: '',
};

class MyForm extends Component {
  render() {
    return (
      
        {({ isValid }) => (
          
            
          
        )}
      
    );
  }
}