[React] 구조화

나지은·2020년 9월 9일
0
post-thumbnail

1. handleIdValue함수와 handlePwValue를 합치는 handleInput함수

class Login extends React.Component {
  constructor() {
    super();
    this.state = {
      idValue: "",
      pwValue: "",
    }
  }

  handleInput = e => {
    const { name, value } = e.target;
    this.setState({
      [name]: value
    })
  }

  // handleIdValue = (event) => {
  //   this.setState({
  //     idValue: event.target.value
  //   })
  // }

  // handlePwValue = (event) => {
  //   this.setState({
  //     pwValue: event.target.value
  //   })
  // }
  
  render() {
    const { idValue, pwValue } = this.state;

    return (
      <div>
      	<input className="idValue" type="text" placeholder="전화번호, 사용자 이름 또는 이메일" name="idValue" onChange={this.handleInput} />
      	<input className="pwValue" type="password" placeholder="비밀번호" name="pwValue" onChange={this.handleInput} />
         </div >
    );
  }
}

export default withRouter(Login);
  • const { name, value } = e.target;
    -> e.target.name
    -> e.target.value

  • <input className="idValue" type="text" placeholder="전화번호, 사용자 이름 또는 이메일" name="idValue" onChange={this.handleInput} />
    const에 담긴 name === input에 있는 name
    input name="idValue" === state의 키 idValue

profile
즐거움을 찾는 개발자🐯

0개의 댓글