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