[Wecode 19일차] 리액트 이벤트 & 페이지 전환

로그인화면에서 아이디, 비번이 6글자 이상일 때,  로그인 버튼이 파란색으로 활성화되게끔 바꾸기.

삽질한 내용

1. handleonChange 메서드에 아이디, 비번을 넣었더니, 비번이 7자 이상될때 활성화 됨...한박자 느림..  

state ={
    isIdPw : false,
    inputID : "",
    inputPW : "",
  }

(...중략)

handleChange = (e) =>{
    this.setState({
     [e.target.name] : e.target.value,
    })
    
    if(this.state.inputID.length >= 6 && this.state.inputPW.length >=6){
      setState({
      	isIdPw : true,
      })
    }else{
      setState({
      	isIdPw : false,
      })
    }    
  }
  
  (...중략)
  render(){
  	return(
    	 <Button name="LoginBtn" onClick={this.handleLogin} style={this.state.isIdPw ? {backgroundColor:"#1DA1F2"} : {backgroundColor:"gray"}}/> 
    )
  }

2. 따라서, 코드를 수정했다.

 state ={
    inputID : "",
    inputPW : "",
  }
  (...중략)
  handleChange = (e) =>{
    this.setState({
     [e.target.name] : e.target.value,
    })     
  }
  
  //추가생성
  changeBtnColor = () => {
    if(this.state.inputID.length >= 6 && this.state.inputPW.length >=6){
      return true;
    }else{
      return false;
    }
  }
  (...중략)
  render(){
  	return(
   <Button name="LoginBtn" onClick={this.handleLogin} style={this.changeBtnColor() ? {backgroundColor:"#1DA1F2"} : {backgroundColor:"gray"}}/>     
    )
  }
  

 

정리하기.

1. html 상태값 직접 변경하고 싶으면, 삼항연산자.

페이지 전환

react-router-dom에 있는 withRouter를 활용.

withRouter안에 history.push를 이용해서 페이지를 전환한다.