My code
changeButton = () => {
this.state.inputIdValue.indexOf('@') !== -1 &&
this.state.inputPwValue.length >= 5
? this.setState({ isButtonOn: true })
: this.setState({ isButtonOn: false });
};
}
리팩토링
changeButton = () => { const { inputIdValue, inputPwValue } = this.state; this.setState({ isButtonOn: inputIdValue.indexOf('@') !== -1 && inputPwValue.length >= 5, }); };
My code
<button
className={isButtonOn ? 'changeBtnColor' : 'button'}
onClick={this.goToMain}
disabled={isButtonOn ? false : true}
>
리팩토링
<button className={isButtonOn ? 'changeBtnColor' : 'button'} onClick={this.goToMain} disabled={!isButtonOn}
My code
render() {
const { isButtonOn } = this.state;
return (
<div className="loginContainer">
리팩토링
render() { const { isButtonOn } = this.state; return ( <div className="login">
My code
<input
id="id"
name="inputIdValue"
className="logininput"
type="text"
placeholder="전화번호, 사용자 이름 또는 이메일"
onChange={onChange}
onKeyUp={changeBtn}
value={inputIdValue}
/>
<input
id="pw"
name="inputPwValue"
className="logininput"
type="password"
placeholder="비밀번호"
onChange={onChange}
onKeyUp={changeBtn}
value={inputPwValue}
/>
리팩토링
<input name="inputIdValue" className="logininput" type="text" placeholder="전화번호, 사용자 이름 또는 이메일" onChange={onChange} onKeyUp={changeBtn} value={inputIdValue} /> <input name="inputPwValue" className="logininput" type="password" placeholder="비밀번호" onChange={onChange} onKeyUp={changeBtn} value={inputPwValue} />
class LoginBox extends React.Component {
render() {
const { onChange, changeBtn, inputIdValue, inputPwValue } = this.props;
handleInput = event => {
const { name, value } = event.target;
this.setState({
[name]: value,
name은 input tag 에만 있는 속성!