constructor() {
super();
this.state = {
userId: "",
userPassword: "",
btnBlock: true,
btnActClass: false,
};
}
login form 초기값을 state객체 안에 정의한다.
// 로그인 validation
handleLoginInput = (e) => {
const { name, value } = e.target;
this.setState(
{[name]: value},
() => {
const { userId, userPassword } = this.state;
if (userId.includes("@") && userPassword.length >= 5) {
this.setState({
btnActClass: true,
btnBlock: false,
});} else {
this.setState({
btnActClass: false,
btnBlock: true,
});
}
}
);
};
// 메인으로 이동
goToLink = () => {
this.props.history.push("/main-hyojeong");
};
class LoginCheck extends Component {
render() {
const {
handleLoginInput,
btnBlock,
btnActClass,
handleClick
} = this.props;
return (
<form id="login-form" className="login-form">
<fieldset>
<input
type="email"
id="id-input"
placeholder="전화번호, 사용자 이름 또는 이메일"
name="userId"
onChange={handleLoginInput}
/>
<input
type="password"
id="password-input"
placeholder="비밀번호"
name="userPassword"
onChange={handleLoginInput}
/>
</fieldset>
<button
type="submit"
id="submit-btn"
className={"pry-btn " + (btnActClass ? "active" : "")}
disabled={btnBlock}
onClick={handleClick}
>
로그인
</button>
</form>
);
}
}
id, password input이 onChange됬을때 [e.target.name] : e.target.value로 setState한다. id, password input의 name과 e.target.name 을 동일하게 적용하면 해당 state에 값이 들어간다.
id input에 '@'가 있고, password.length가 5글자 이상일 경우 disabled, css style을 수정하여 login button이 활성화되도록 한다.
login button이 활성화되고 버튼 클릭시 goToLink함수가 실행되어 main page로 이동한다.