포믹 및 재료-UI

포믹 및 재료-UI

재료 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;

외관에 대한 검증과 재료 UI를 포믹이 담당했으면 합니다.errors.firstName을 TextField 구성 요소로 전달하려고 하는데 오류가 제대로 표시되지 않습니다.어떻게 고쳐야 읽을 수 있을까요?내 텍스트 필드 구성 요소를 직접 작성하고 싶지 않습니다.

다른 라이브러리가 필요하거나 자체 포장지를 만들 필요가 없다고 생각합니다. 코드를 조금 조정해야 할 것 같습니다.

한 가지 문제는 재료 텍스트 필드에서 onChange 함수를 전달하지 않아서 firstName의 양식 값이 항상 null이므로 이름을 입력한 경우에도 항상 오류가 발생한다는 것입니다.텍스트 필드에 이름 또는 ID를 추가하고 다음과 같은 onChange 기능을 사용해 보십시오.

<Field
    validateOnBlur
    validateOnChange
    name="firstName"
    render={({ field, form }) => (
    <TextField
        name={"firstName"}
        error={
            Boolean(form.errors.firstName && form.touched.firstName)
        }
        onChange={formikBag.handleChange}
        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 APIs 소품을 매핑합니다.

이 접근 방식의 장점은 두 프레임워크 간의 매핑을 한 곳에 집중시켜 매번 매핑을 반복하지 않도록 하는 것이며, 프레임워크 중 하나에서 중단된 변경 사항이 발생할 경우 이러한 사용자 지정 "래퍼" 구성 요소를 변경하면 됩니다.

다음을 사용할 수 있습니다. 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>
    );
  }
}

다음에 대한 formik 문서를 확인하십시오.<Field />여기: https://jaredpalmer.com/formik/docs/api/field

예를 들어 재료 개요를 사용할 수 있습니다.입력 스타일을 지정하기 위한 입력:

<Field as={OutlinedInput} />

아웃라인으로 더 많은 소품을 전달해야 하는 경우입력, 필드에 추가하기만 하면 아웃라인으로 전달됩니다.입력:

<Field as={OutlinedInput} color="primary" InputProps={{ startAdornment: <InputAdornment position="start"><AccountCircle /></InputAdornment> }} />

사용자 지정 입력 변경 핸들러를 만드는 데 유용한 setFieldValue 메서드를 사용할 수 있습니다.

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

material-ui 및 formik을 사용하려면 공식 formik 설명서의 변형을 사용할 수 있습니다. https://formik.org/docs/examples/with-material-ui

이해 볼 는 헤비 을 수행하고 Material-UI 요소 포함하여)를를 구현합니다.<TextField />): https://github.com/stackworx/formik-material-ui .

설치:

yarn add formik-material-ui

Formik 양식 구성 요소에서 다음을 전달합니다.<TextField />의 구성 요소 요소<Field />요소.

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

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

Formik은 예상대로 유효성 검사를 계속 처리하고 재료 UI 구성 요소 및 오류 메시지를 렌더링합니다.문서에는 다른 Mui 입력 구성 요소에 대한 추가 세부 정보와 사용자 지정에 도움이 되는 정보가 있습니다.

언급URL : https://stackoverflow.com/questions/52111447/formik-and-material-ui