재사용 가능한 사용자 정의 갈고리를 구축하여 ReactJS에서 폼 검증⚓
형식.📝 처리는 모든 사이트의 중요한 구성 부분이다.폼이 사용자로부터 중요한 정보를 얻기 때문이다.입력과 검증을 처리할 수 있는 건장한 폼 구성 요소를 만들어야 합니다🚦 아주 쉽다.
여기서 우리는 간단한 React 갈고리를 만들 것이다⚓ 폼과 검증을 처리합니다.
이 갈고리의 장점은,
⏭ 이것은 다시 사용할 수 있기 때문에 사이트의 어느 위치나 다른 항목에서도 사용할 수 있습니다.
⏭ 검증을 쉽게 처리할 수 있습니다. 검증할 입력 필드에 조건을 설정하기만 하면 됩니다.
⏭ 이 갈고리는 오류 처리를 매우 쉽게 할 수 있고, 너도 오류 메시지를 사용자 정의할 수 있다.
⏭ 실현과 구축이 매우 쉽다
만약 네가 동영상을 보는 것을 좋아한다면, 여기는 동영상 강좌이다👇
인코딩을 시작해보도록 하겠습니다.
우선, 다음 명령을 사용하여react 프로그램을 만들었는지 확인하십시오👇
npx create-react-app react-form-component
cd react-form-component
npm start
2️⃣ 프로그램에서 불필요한 코드를 지웁니다.js 파일.
셋️⃣ 아래 그림과 같이 3개의 입력과 1개의 제출 단추를 포함하는 폼을 만듭니다👇
4,️⃣ 응용 프로그램에 css를 추가합니다.css 파일
.App {
text-align: center;
margin-top: 20vh;
}
form{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
input{
margin: 0.5rem 0;
padding: 1rem;
outline: none;
}
.submit{
border: 2px solid #000 !important;
cursor: pointer;
}
5,️⃣ Src에서 Hooks 폴더를 만듭니다.이 폴더에useForm이라는 파일을 만듭니다.js
To create any custom hook, you can keep different file name but name of the hook should always start from use keyword.
이 파일에서 기본 코드 세션을 작성합니다. 아래와 같습니다.
const useForm = () => {
return();
}
export default useForm
6,️⃣ 이 갈고리에서 우리는 우선 두 가지 상태가 필요하다
가치=>폼 값을 저장하는 상태, 처음에는 빈 대상
오류 = >스토리지 오류(있는 경우)의 상태입니다. 처음에는 빈 개체입니다
그래서 이 상태를 만듭니다.
//Form values
const [values, setValues] = useState({});
//Errors
const [errors, setErrors] = useState({});
7,️⃣ 양식 값을 처리하고 상태 값을 설정하는 방법을 만듭니다
//A method to handle form inputs
const handleChange = (event) => {
//To stop default events
event.persist();
let name = event.target.name;
let val = event.target.value;
validate(event,name,val);
//Let's set these values in state
setValues({
...values, //spread operator to store old values
[name]:val,
})
}
이 방법은 이벤트를 매개 변수로 하고values 대상에서 값 상태를 [key]로 설정합니다: 값이
현재 다른 구성 요소에서 이 방법과 상태를 사용하려면 되돌려야 합니다
현재 코드는 다음과 같습니다👇
8,️⃣ 응용 프로그램에서 이 연결을 호출하고 사용하도록 합니다.js 파일
응용 프로그램 파일을 열고 다음 코드를 붙여넣기
useForm 갈고리 가져오기
import useForm from './Hooks/useForm';
hook에서 상태 및 방법 해체
//Custom hook call
const {handleChange, values,errors } = useForm();
handleChange 방법을 입력한 모든 onChange 이벤트와 연결해야 합니다. 아래와 같습니다.👇
<input type="email" name="email" placeholder="E-mail" onChange={handleChange} />
<input type="password" name="password" placeholder="password" onChange={handleChange} />
<input type="text" name="username" placeholder="username" onChange={handleChange} />
응용 프로그램에서 console.log(values) 상태 값을 검사할 수 있습니다.js 파일
양식 유효성 검사
9,️⃣ useForm hook에서 검증 함수를 만듭니다
사용 폼을 엽니다.js 파일을 작성하고 코드를 작성합니다.
const validate = (event, name, value) => {
//A function to validate each input values
switch (name) {
case 'username':
if (value.length <= 4) {
// we will set the error state
setErrors({
...errors,
username: 'Username atleast have 5 letters'
})
} else {
// set the error state empty or remove the error for username input
//omit function removes/omits the value from given object and returns a new object
let newObj = omit(errors, "username");
setErrors(newObj);
}
break;
default:
break;
}
}
검증 함수를 분해해 봅시다
=>이 함수는 3개의 매개 변수를 수락합니다,
이벤트➡ 사용자 정의 또는 스타일화된 목표 요소를 원하면
성함➡ 원소의 이름
가치관➡ 원소의 값
=>여기서 우리는 서로 다른 요소에 대해 Switch문장을 사용하여 당신이 서로 다른 요소를 검증할 수 있도록 합니다
스위치 함수의 키는 원소의 이름입니다
=>첫 번째 예는 사용자 이름입니다
그래서 이런 상황에서 우리는 조건이 하나 있다.
사용자 이름 값의 길이가 <=이면4 그런 다음 오류 상태를 설정합니다. 그렇지 않으면 오류(있을 경우)를 제거합니다.
Here we have used omit function, since we can not manipulate state object directly. This omit function takes two arguments first is the object and second is the name of the error you want to remove, Now omit function remove that error if it exist then it returns the new object.
는handleChange 방법에서validate 함수를 사용하여 모든 매개 변수를 전달할 수 있도록 합니다
아래의 전체 코드 참조👇
35줄은 전자메일입니다. 정규 표현식으로 전자메일 값을 검증합니다.false인 경우 조건이 true로 변경되면 오류를 설정합니다
비밀번호도 마찬가지
요구 사항에 따라 이 일반 기능을 사용자 정의할 수 있습니다
82번째 줄은 이 줄에서validate 함수를 호출하여 모든 입력을 검증할 수 있습니다
처리 제출
🔟 핸들 제출 함수를 만듭니다
응용 프로그램을 엽니다.js 파일 및 다음 코드 작성
//Final submit function
const formLogin = () => {
console.log("Callback function when form is submitted!");
console.log("Form Values ", values);
}
현재 사용자 정의 함수입니다. 폼을 제출할 때 호출됩니다
이 함수를 useForm 갈고리에 리셋 함수로 전달합니다
//Custom hook call
const {handleChange, values,errors,handleSubmit} = useForm(formLogin);
이것이 바로 사용자 정의 함수를 갈고리에 전달하는 방법입니다
1,️⃣1️⃣ useForm을 엽니다.js 파일
아래 아이템에서 리셋 함수 해체👇const useForm = (callback) => {
...
handleSubmit 함수를 만듭니다
const handleSubmit = (event) => {
if(event) event.preventDefault();
if(Object.keys(errors).length === 0 && Object.keys(values).length !==0 ){
callback();
}else{
alert("There is an Error!");
}
}
이 함수에서
만약 오류의 길이가 0이고 값의 길이가 0이 아니면 (값이 비어 있지 않음) 리셋 함수를 호출합니다. 그렇지 않으면 사용자에게 알립니다
NOTE: You should customize these conditions as per your requirements.
return 문장에handleSubmit 함수를 추가하는 것을 잊지 마세요
1,️⃣2️⃣ 응용 프로그램을 엽니다.js 파일
useForm 갈고리에서handleSubmit 해체 방법const {handleChange, values,errors,handleSubmit} = useForm(formLogin);
이 방법을 아래 폼과 연결
<form onSubmit={handleSubmit}>
오류 표시
지금 오류를 표시하려면 이렇게 할 수 있습니다.
<form onSubmit={handleSubmit}>
<input type="email" name="email" placeholder="E-mail" onChange={handleChange} />
{
errors.email && <h3>{errors.email}</h3>
}
<input minLength='8' type="password" name="password" placeholder="password" onChange={handleChange} />
{
errors.password && <h3>{errors.password}</h3>
}
<input type="text" minLength='5' required name="username" placeholder="username" onChange={handleChange} />
{
errors.username && <h3>{errors.username}</h3>
}
<input type="submit" value="Submit" className="submit" />
</form>
먼저 오류가 있는지 확인한 다음 오류가 발생하면
당신은 영상을 볼 수 있습니다. 구성 요소의 값에 따라 구성 요소의 일부 스타일을 조종할 수 있습니다
결말
본 강좌는 이것으로 끝냅니다.
나는 그것이 네가 뭔가를 배울 수 있도록 도와줄 수 있기를 바란다
본 강좌의 전체 코드👉
https://github.com/codebucks27/React-Form-Component
질문이 있으시면 댓글로 남겨주세요.😉
읽어주셔서 감사합니다.😄
내 유튜브 채널에 오신 것을 환영합니다:
[ ]
Reference
이 문제에 관하여(재사용 가능한 사용자 정의 갈고리를 구축하여 ReactJS에서 폼 검증⚓), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codebucks/form-validation-in-reactjs-by-building-reusable-custom-hook-1bg7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
