728x90
import { useState } from "react";
export default function Login() {
const [inputs, setInputs] = useState({
email: "",
password: "",
});
//유효성 체크
const [didEdit, setDidEdit] = useState({ //입력상태 저장 상태변수
email: false,
password: false,
})
//유효성 조건 지정
const emailIsInvalid = didEdit.email && !inputs.email.includes("@"); //이메일에는 @가 반드시 포함
const passwordIsInvalid = didEdit.password && !(inputs.password.length > 6); //패스워드는 6자 이상
console.log(
"emailIsInvalid: ", emailIsInvalid,
"passwordIsInvalid: ", passwordIsInvalid
)
function handleInputChange(identifier, value) {
setInputs({ ...inputs, [identifier]: value });
//유효성 체크용
setDidEdit({...didEdit, [identifier]: false});
console.log(inputs);
console.log(didEdit);
}
function handleSubmit(event) {
event.preventDefault();
console.log(inputs);
}
function handleInputBlur(identifier){
setDidEdit({...didEdit, [identifier]: true})
}
return (
<>
<h2>Login</h2>
<form onSubmit={handleSubmit}>
emailIsInvalid###{emailIsInvalid ? "true" : "false"}
<br></br>
passwordIsInvalid###{passwordIsInvalid ? "true" : "false"}
<div>
<div>
<label htmlFor="email">email</label>
<input
type="email"
id="email"
name="email"
value={inputs.email}
onChange={(event) =>
handleInputChange("email", event.target.value)
}
onBlur={() => handleInputBlur("email")}
></input>
<span>{emailIsInvalid && <p>email @ 필수</p>}</span>
</div>
</div>
<div>
<div>
<label htmlFor="password">password</label>
<input
type="password"
id="password"
name="password"
value={inputs.password}
onChange={(event) =>
handleInputChange("password", event.target.value)
}
onBlur={() => handleInputBlur("password")}
></input>
<span>{passwordIsInvalid && <p>password 6자리 이상</p>}</span>
</div>
</div>
<button type="submit">Login</button>
</form>
</>
);
}
'단순 코드 기록 > React' 카테고리의 다른 글
React_styled자식 연결 (0) | 2024.03.22 |
---|---|
React_css(내부파일 / 외부파일 / styled-components) (0) | 2024.03.22 |
React_등록(FormData) (0) | 2024.03.22 |
React_로그인폼(useState / useRef) (0) | 2024.03.22 |
React_Action함수를 이용한 Form 전송 (0) | 2024.03.21 |