React Formik 및 Yup 시작하기
81841 단어 reactformikjavascriptvalidation
목차
Formik Hook
포믹이란?
Formik은 개발자가 React 및 React Native에서 Forms를 처리하는 데 도움이 되는 라이브러리입니다.
개발자로서 우리는 다음을 수행해야 합니다.
Formik을 사용하면 쉽고 확장 가능하며 성능이 뛰어난 방식으로 모든 작업을 수행할 수 있습니다.
설치
npm i --save formik
포믹 후크
다음을 사용하여 로그인 양식 만들기:
npm i --save formik
다음을 사용하여 로그인 양식 만들기:
import React from "react";
/**
* LoginForm Component
*/
const LoginForm = () => {
return (
<form>
<div style={{ padding: 20 }}>
<label htmlFor="email" style={{ display: "block" }}>
email
</label>
<input type="email" id="email" />
<label htmlFor="password" style={{ display: "block" }}>
password
</label>
<input type="password" id="password" />
<label htmlFor="rememberMe" style={{ display: "block" }}>
remember me
</label>
<input type="checkbox" id="rememberMe" />
<button style={{ display: "block" }}>submit</button>
</div>
</form>
);
};
export default LoginForm;
Formik 주입
useFormik
가져오기 및 각 initialValues
이름이 있는 input
속성을 추가합니다. name
키 이름에 해당하는 각 input
요소에 initialValues
속성을 추가합니다. formik.values[name]
요소의 value
속성에 input
를 추가합니다.defaultChecked={formik.values[name]}
를 추가합니다. formik.handleChange
요소의 onChange
속성에 input
를 추가합니다. formik
태그 안에 <pre>
객체를 인쇄합니다. input
요소를 채우고 formik
개체의 변경 사항을 확인합니다.import React from "react";
import { useFormik } from "formik";
/**
* LoginForm Component
*/
const LoginForm = () => {
const formik = useFormik({
initialValues: {
email: "",
password: "",
rememberMe: false,
},
});
return (
<form>
<div style={{ padding: 20 }}>
<label htmlFor="email" style={{ display: "block" }}>
email
</label>
<input
type="email"
id="email"
name="email"
value={formik.values.email}
onChange={formik.handleChange}
/>
<label htmlFor="password" style={{ display: "block" }}>
password
</label>
<input
type="password"
id="password"
name="password"
value={formik.values.password}
onChange={formik.handleChange}
/>
<label htmlFor="rememberMe" style={{ display: "block" }}>
remember me
</label>
<input
type="checkbox"
name="rememberMe"
id="rememberMe"
onChange={formik.handleChange}
defaultChecked={formik.values.rememberMe}
/>
<button style={{ display: "block" }}>submit</button>
</div>
<pre>{JSON.stringify(formik, null, 4)}</pre>
</form>
);
};
export default LoginForm;
양식 제출 처리
formik.handleSubmit
요소의 onSubmit
특성에 form
를 추가합니다. onSubmit
후크에 두 번째 속성으로 useFormik
를 추가합니다. values
함수에 전달된 onSubmit
를 기록합니다.import React from "react";
import { useFormik } from "formik";
/**
* LoginForm Component
*/
const LoginForm = () => {
const formik = useFormik({
initialValues: {
email: "",
password: "",
rememberMe: false,
},
onSubmit: (values) => console.log(JSON.stringify(values, null, 4)),
});
return (
<form onSubmit={formik.handleSubmit}>
<div style={{ padding: 20 }}>
<label htmlFor="email" style={{ display: "block" }}>
email
</label>
<input
type="email"
id="email"
name="email"
value={formik.values.email}
onChange={formik.handleChange}
/>
<label htmlFor="password" style={{ display: "block" }}>
password
</label>
<input
type="password"
id="password"
name="password"
value={formik.values.password}
onChange={formik.handleChange}
/>
<label htmlFor="rememberMe" style={{ display: "block" }}>
remember me
</label>
<input
type="checkbox"
name="rememberMe"
id="rememberMe"
onChange={formik.handleChange}
defaultChecked={formik.values.rememberMe}
/>
<button style={{ display: "block" }}>submit</button>
</div>
<pre>{JSON.stringify(formik, null, 4)}</pre>
</form>
);
};
export default LoginForm;
Yup으로 양식 유효성 검사 처리
npm install yup --save
import * as yup from "yup"
useFormik
후크에 validationSchema 속성을 만듭니다. errors
객체 내부의 formik
객체를 확인하십시오.import React from "react";
import { useFormik } from "formik";
import * as yup from "yup";
/**
* LoginForm Component
*/
const LoginForm = () => {
const formik = useFormik({
initialValues: {
email: "",
password: "",
rememberMe: false,
},
onSubmit: (values) => console.log(JSON.stringify(values, null, 4)),
validationSchema: yup.object({
email: yup.string().email().required(),
password: yup.string().required(),
}),
});
return (
<form onSubmit={formik.handleSubmit}>
<div style={{ padding: 20 }}>
<label htmlFor="email" style={{ display: "block" }}>
email
</label>
<input
type="email"
id="email"
name="email"
value={formik.values.email}
onChange={formik.handleChange}
/>
<label htmlFor="password" style={{ display: "block" }}>
password
</label>
<input
type="password"
id="password"
name="password"
value={formik.values.password}
onChange={formik.handleChange}
/>
<label htmlFor="rememberMe" style={{ display: "block" }}>
remember me
</label>
<input
type="checkbox"
name="rememberMe"
id="rememberMe"
onChange={formik.handleChange}
defaultChecked={formik.values.rememberMe}
/>
<button style={{ display: "block" }}>submit</button>
</div>
<pre>{JSON.stringify(formik, null, 4)}</pre>
</form>
);
};
export default LoginForm;
오류 메시지 표시
<div>
태그를 생성하고 formik.errors[name]
를 확인하여 유효성 검사가 있는 각 요소 아래에 오류 메시지를 표시합니다.import React from "react";
import { useFormik } from "formik";
import * as yup from "yup";
/**
* LoginForm Component
*/
const LoginForm = () => {
const formik = useFormik({
initialValues: {
email: "",
password: "",
rememberMe: false,
},
onSubmit: (values) => console.log(JSON.stringify(values, null, 4)),
validationSchema: yup.object({
email: yup.string().email().required(),
password: yup.string().required(),
}),
});
return (
<form onSubmit={formik.handleSubmit}>
<div style={{ padding: 20 }}>
<label htmlFor="email" style={{ display: "block" }}>
email
</label>
<input
type="email"
id="email"
name="email"
value={formik.values.email}
onChange={formik.handleChange}
/>
{formik.errors.email && (
<div style={{ color: "red" }}>{formik.errors.email}</div>
)}
<label htmlFor="password" style={{ display: "block" }}>
password
</label>
<input
type="password"
id="password"
name="password"
value={formik.values.password}
onChange={formik.handleChange}
/>
{formik.errors.password && (
<div style={{ color: "red" }}>{formik.errors.password}</div>
)}
<label htmlFor="rememberMe" style={{ display: "block" }}>
remember me
</label>
<input
type="checkbox"
name="rememberMe"
id="rememberMe"
onChange={formik.handleChange}
defaultChecked={formik.values.rememberMe}
/>
<button style={{ display: "block" }}>submit</button>
</div>
<pre>{JSON.stringify(formik, null, 4)}</pre>
</form>
);
};
export default LoginForm;
방문한 필드에 오류 메시지 표시
formik.handleBlur
요소와 함께 onBlur
속성이 있는 input
를 추가합니다. input
요소를 방문하여 인쇄된 touched
개체 내부의 formik
개체를 확인합니다. formik.touched[name]
앞에 formik.errors[name]
를 추가합니다.import React from "react";
import { useFormik } from "formik";
import * as yup from "yup";
/**
* LoginForm Component
*/
const LoginForm = () => {
const formik = useFormik({
initialValues: {
email: "",
password: "",
rememberMe: false,
},
onSubmit: (values) => console.log(JSON.stringify(values, null, 4)),
validationSchema: yup.object({
email: yup.string().email().required(),
password: yup.string().required(),
}),
});
return (
<form onSubmit={formik.handleSubmit}>
<div style={{ padding: 20 }}>
<label htmlFor="email" style={{ display: "block" }}>
email
</label>
<input
type="email"
id="email"
name="email"
value={formik.values.email}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.email && formik.errors.email && (
<div style={{ color: "red" }}>{formik.errors.email}</div>
)}
<label htmlFor="password" style={{ display: "block" }}>
password
</label>
<input
type="password"
id="password"
name="password"
value={formik.values.password}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.password && formik.errors.password && (
<div style={{ color: "red" }}>{formik.errors.password}</div>
)}
<label htmlFor="rememberMe" style={{ display: "block" }}>
remember me
</label>
<input
type="checkbox"
name="rememberMe"
id="rememberMe"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
defaultChecked={formik.values.rememberMe}
/>
<button style={{ display: "block" }}>submit</button>
</div>
<pre>{JSON.stringify(formik, null, 4)}</pre>
</form>
);
};
export default LoginForm;
사용자 지정 유효성 검사 메시지
각 필드에 대한 사용자 지정 유효성 검사 메시지를 yup 유효성 검사 함수의 문자열 인수로 전달할 수 있습니다.
import React from "react";
import { useFormik } from "formik";
import * as yup from "yup";
/**
* LoginForm Component
*/
const LoginForm = () => {
const formik = useFormik({
initialValues: {
email: "",
password: "",
rememberMe: false,
},
onSubmit: (values) => console.log(JSON.stringify(values, null, 4)),
validationSchema: yup.object({
email: yup
.string()
.email("Please enter a valid email address")
.required("Email field is required"),
password: yup.string().required("Password field is required"),
}),
});
return (
<form onSubmit={formik.handleSubmit}>
<div style={{ padding: 20 }}>
<label htmlFor="email" style={{ display: "block" }}>
email
</label>
<input
type="email"
id="email"
name="email"
value={formik.values.email}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.email && formik.errors.email && (
<div style={{ color: "red" }}>{formik.errors.email}</div>
)}
<label htmlFor="password" style={{ display: "block" }}>
password
</label>
<input
type="password"
id="password"
name="password"
value={formik.values.password}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.password && formik.errors.password && (
<div style={{ color: "red" }}>{formik.errors.password}</div>
)}
<label htmlFor="rememberMe" style={{ display: "block" }}>
remember me
</label>
<input
type="checkbox"
name="rememberMe"
id="rememberMe"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
defaultChecked={formik.values.rememberMe}
/>
<button style={{ display: "block" }}>submit</button>
</div>
<pre>{JSON.stringify(formik, null, 4)}</pre>
</form>
);
};
export default LoginForm;
코드 리팩터링
다음을 수행하여 코드를 보다 체계적으로 만들고 코드 줄을 줄이도록 하겠습니다.
value={formik.values[name]}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
~와 함께
{...formik.getFieldProps(name)}
initialValues
, onSubmit
및 validationSchema
import React from "react";
import { useFormik } from "formik";
import * as yup from "yup";
/**
* LoginForm Component
*/
const LoginForm = () => {
const initialValues = {
email: "",
password: "",
rememberMe: false,
};
const onSubmit = (values) => console.log(JSON.stringify(values, null, 4));
const validationSchema = yup.object({
email: yup
.string()
.email("Please enter a valid email address")
.required("Email field is required"),
password: yup.string().required("Password field is required"),
});
const formik = useFormik({
initialValues,
onSubmit,
validationSchema,
});
return (
<form onSubmit={formik.handleSubmit}>
<div style={{ padding: 20 }}>
<label htmlFor="email" style={{ display: "block" }}>
email
</label>
<input
type="email"
id="email"
name="email"
{...formik.getFieldProps("email")}
/>
{formik.touched.email && formik.errors.email && (
<div style={{ color: "red" }}>{formik.errors.email}</div>
)}
<label htmlFor="password" style={{ display: "block" }}>
password
</label>
<input
type="password"
id="password"
name="password"
{...formik.getFieldProps("password")}
/>
{formik.touched.password && formik.errors.password && (
<div style={{ color: "red" }}>{formik.errors.password}</div>
)}
<label htmlFor="rememberMe" style={{ display: "block" }}>
remember me
</label>
<input
type="checkbox"
name="rememberMe"
id="rememberMe"
defaultChecked={formik.values.rememberMe}
{...formik.getFieldProps("rememberMe")}
/>
<button style={{ display: "block" }}>submit</button>
</div>
<pre>{JSON.stringify(formik, null, 4)}</pre>
</form>
);
};
export default LoginForm;
Reference
이 문제에 관하여(React Formik 및 Yup 시작하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/youssefzidan/getting-started-with-react-formik-yup-j49텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)