24

Material-UI テキスト フィールドで Formik を使用しようとしています。そのようです：

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 (
      <div>
        <h1>My Example</h1>
        <Formik
          initialValues={{ firstName: '' }}
          // tslint:disable-next-line:jsx-no-lambda
          onSubmit={(values: IMyFormValues) => alert(JSON.stringify(values))}
          // tslint:disable-next-line:jsx-no-lambda
          validate={(values: IMyFormValues) => {
            const errors: FormikErrors<IMyFormValues> = {};
            if (!values.firstName) {
              errors.firstName = 'Required';
            }
            return errors;
          }}
          // tslint:disable-next-line:jsx-no-lambda
          render={(formikBag: FormikProps<IMyFormValues>) => (
            <Form>
              <Field
                name="firstName"
                render={({ field, form }: FieldProps<IMyFormValues>) => (
                  <TextField
                    error={Boolean(
                      form.errors.firstName && form.touched.firstName
                    )}
                    helperText={
                      form.errors.firstName &&
                      form.touched.firstName &&
                      String(form.errors.firstName)
                    }
                  />
                )}
              />
            </Form>
          )}
        />
      </div>
    );
  }
}

export default CreateAgreementForm;

Formik が検証を担当し、Material-UI がルックスを担当するようにしたいと考えています。errors.firstName を TextField コンポーネントに渡したいのですが、エラーが正しく表示されません。それでも読みやすいように修正するにはどうすればよいですか？独自の TextField コンポーネントを作成したくありません。

4

7 に答える 7

1

このライブラリを試すこともできます。このライブラリは、面倒な作業を行い、Material-UI コンポーネント (を含む<TextField />) のラッパー コードを実装します: https://github.com/stackworx/formik-material-ui。

インストール:

yarn add formik-material-ui

Formik フォーム コンポーネントで、<TextField />コンポーネントを Formik コンポーネントの component prop として渡し<Field />ます。

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

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

Formik は引き続き期待どおりに検証を処理し、Material UI コンポーネントとエラー メッセージをレンダリングします。その他の Mui 入力コンポーネントのドキュメントには、カスタマイズを支援する追加の詳細があります。

于 2019-09-30T22:07:42.177 に答える