패스워드를 입력해서 맞으면 success class를, 틀리면 failure를 부여하고 싶다.
class ValidationSample extend Component{
state ={
password:'',
clicked:false,
validated:false
}
handleChange = (e) => {
this.setState({
password:e.target.value
});
}
handleButtonClick = ()=>{
this.setState({
clicked:true,
validated:this.state.password ==='0000'
})
}
render(){
return (
<div>
<input
type="password"
value={this.state.password}
onChange = {this.handleChange}
className ={this.state.clicked ?
(this.state.validated ? 'success' : 'failure') : ''}/>
<button onClick={this.handleButtonClick}>검증하기</button>
</div>
)}
className ={this.state.clicked ? (this.state.validated ? 'success' : 'failure') : ''}
''
validated
검사 → true
면 success
, false
면 failure