Formik и Material-UI

Я не думаю, что вам нужна другая библиотека или даже создать свою собственную оболочку, я думаю, вам нужно немного подправить свой код.

Одна из ваших проблем заключается в том, что вы не передаете функцию onChange в текстовом поле материала, поэтому значение формы firstName всегда равно нулю, и вы всегда получаете сообщение об ошибке, даже если вы ввели имя. Попробуйте добавить имя или идентификатор в текстовое поле и функцию onChange следующим образом:

<Field
    validateOnBlur
    validateOnChange
    name = "firstName"
    render = {({ field, form }) => (
    <TextField
        name = {"firstName"}
        error = {
            Boolean(form.errors.firstName && form.touched.firstName)
        }
        onChange = {formikBag.handleChangeEvent}
        onBlur = {formikBag.handleBlur}
        helperText = {
            form.errors.firstName &&
            form.touched.firstName &&
            String(form.errors.firstName)
        }
    />
    )}
/>

Как упоминалось в комментариях, на самом деле может быть хорошей идеей реализовать компоненты «оболочки», как это было в этих примерах из Formik или ReactFinalForm:

• https://github.com/stackworx/formik-material-ui/tree/master/src
• https://github.com/final-form/react-final-form#material-ui-10

Идея та же: реализовать пользовательские компоненты «оболочки», чтобы обернуть компоненты UI и сопоставить свойства Formik или ReactFinalForm API.

Преимущества этого подхода - централизовать в одном месте сопоставление между двумя фреймворками, чтобы вы не повторяли сопоставление каждый раз, и если одна из фреймворков вносит критические изменения, вам просто нужно изменить эти пользовательские компоненты «оболочки».

Вы можете попробовать это: 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 (
      <Formik
        initialValues = {initialValues}
        validationSchema = {validationSchema}
        onSubmit = {this.props.onSubmit}
      >
        {({ isValid }) => (
          <Form autoComplete = "off">
            <FormikTextField
              name = "username"
              label = "Username"
              margin = "normal"
              fullWidth
            />
          </Form>
        )}
      </Formik>
    );
  }
}

Вы также можете попробовать эту библиотеку, которая делает за вас всю тяжелую работу и реализует код оболочки для компонентов UI-материала (включая <TextField />): https://github.com/stackworx/formik-material-ui.

Монтаж:

yarn add formik-material-ui

В компоненте формы Formik передайте компонент <TextField /> в качестве свойства компонента Formik <Field />.

import { Formik, Field, Form } from 'formik';
import { TextField } from 'formik-material-ui';

<Field
  name = "email"
  label = "Email"
  type = "email"
  component = {TextField}
/>

Formik продолжит обработку проверки, как ожидалось, и отобразит компонент пользовательского интерфейса материала и сообщение об ошибке. В документации есть дополнительные сведения для других компонентов ввода Mui, а также для помощи в настройке.

Ознакомьтесь с документацией formik для <Field /> здесь: https://jaredpalmer.com/formik/docs/api/field

В качестве примера вы можете использовать OutlinedInput материала для стилизации ввода:

<Field as = {OutlinedInput} />

Чтобы использовать материал-интерфейс и Formik, вы можете использовать вариант из официальная документация formik: https://formik.org/docs/examples/with-material-ui

Вы можете использовать метод setFieldValueполезно для создания пользовательских обработчиков изменений ввода

<Formik
  initialValues = {{
    name: "",
  }}
  onSubmit = {(values: any) => console.info(values)}
>
  {({  handleSubmit, setFieldValue }) => (
    <Form noValidate autoComplete = "off" onSubmit = {handleSubmit}>
      <TextField
        onChange = {(event) => setFieldValue("name", event.target.value)} 
        type = "text"
        label = "Name"
      />
    </Form>
  )}
</Formik>