React Formik : 커스텀 onChange 및 onBlur 사용방법

React Formik : 커스텀 onChange 및 onBlur 사용방법

리액션용 Formik 라이브러리에서 시작했는데 소품 핸들 변경 및 핸들Blur의 사용법을 알 수 없습니다.

이 문서에 따르면 handleBlur는 다음 중 하나의 소품으로 설정될 수 있습니다.<Formik/>그 후 수동으로 에 전달해야 합니다.<input/>.

시도했지만 성공하지 못했습니다: (좀 더 명확하게 하기 위해 handleBlur에 대한 코드를 유지하고 있습니다.)

import React from "react";
import { Formik, Field, Form } from "formik";
import { indexBy, map, compose } from "ramda";
import { withReducer } from "recompose";

const MyInput = ({ field, form, handleBlur, ...rest }) =>
  <div>
    <input {...field} onBlur={handleBlur} {...rest} />
    {form.errors[field.name] &&
      form.touched[field.name] &&
      <div>
        {form.errors[field.name]}
      </div>}
  </div>;

const indexById = indexBy(o => o.id);
const mapToEmpty = map(() => "");

const EmailsForm = ({ fieldsList }) =>
  <Formik
    initialValues={compose(mapToEmpty, indexById)(fieldsList)}
    validate={values => {
      // console.log("validate", { values });
      const errors = { values };
      return errors;
    }}
    onSubmit={values => {
      console.log("onSubmit", { values });
    }}
    handleBlur={e => console.log("bluuuuurr", { e })}
    render={({ isSubmitting, handleBlur }) =>
      <Form>
        <Field
          component={MyInput}
          name="email"
          type="email"
          handleBlur={handleBlur}
        />
        <button type="submit" disabled={isSubmitting}>
          Submit
        </button>
      </Form>}
  />;

이 접근법의 문제점은 무엇입니까?handleBlur 및 handleChange는 실제로 어떻게 사용됩니까?

첫 번째를 제거해야 합니다.handleBlur부터Formikblur 이벤트는 필드 레벨에서만 유효하며 필드 요소에서 다음과 같은 작업을 수행합니다.

<Field
    component={MyInput}
    name="email"
    type="email"
    onBlur={e => {
        // call the built-in handleBur
        handleBlur(e)
        // and do something about e
        let someValue = e.currentTarget.value
        ...
    }}
/>

https://github.com/jaredpalmer/formik/issues/157 를 참조해 주세요.

위의 질문 코드에 따르면 한 가지만 변경하면 됩니다. 즉, BlurCapture={handleBlur}

html 입력 요소에서 작동합니다.onBlur, onFocusOut은 반응에서 지원되지 않습니다.그러나 같은 문제가 발생하여 렌더 소품과의 리액트 폼 컴포넌트로 해결되었습니다.

포믹 소품에는 없는 onChange 방식을 사용했을 때도 같은 문제에 직면했습니다.

그래서 필드 값을 제공하는 폼익 소품에서 사용할 수 있는 onSubmit 메서드를 사용하여 해당 값을 관심 함수에 전달했습니다.

<Formik
          initialValues={initialValues}
          validationSchema={signInSchema}
          onSubmit={(values) => {
            registerWithApp(values);
            console.log(values);
          }}
        >

그리고 거기서 사용할 수 있어, 난 그저 상태를 업데이트하고 그렇게 공리들에게 전달했을 뿐이야...

    const [user, setUser] = useState({
    name: "",
    email: "",
    password: ""
  });

  const registerWithApp = (data) => {
    const { name, email, password } = data;
    setUser({
      name:name,
      email:email,
      password:password
    })
   
    if (name && email && password) {
      axios.post("http://localhost:5000/signup", user)
        .then(res => console.log(res.data))
    }
    else {
      alert("invalid input")
    };
  }

그리고 그것은 작동한다.도움이 됐으면 좋겠네요.

언급URL : https://stackoverflow.com/questions/48466920/react-formik-how-to-use-custom-onchange-and-onblur