e.target 활용하기

 

객체 안에 key를 [ ] 로 감싸면 그 안에 넣은 레퍼런스가 

가리키는 실제 값이 key 값으로 사용 된다.

 

const name = 'cony';
const object = {
[name] : 'value'

};

 

class  EventPractice extends Component {
    
    state = {
        username : '',
        message: ''
    }

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

    handleClick = () =>{
        const {username} = this.state;
        alert(username + ':'+this.state.message);
        this.setState({
            username : '',
            message:''
        });
    }
    render(){
    const {message} = this.state;
    return (
        <div>
            <h1>이벤트 연습</h1>
            <input
                type="text"
                name="username"
                placeholder="사용자 명"
                value= {this.state.username}
                onChange={this.handleChange}
                />
            <input
                type="text"
                name="message"
                placeholder="아무거나 입력하세요"
                value= {message}
                onChange={this.handleChange}
                />
                <button onClick= {this.handleClick}>확인</button>
        </div>
    );
}
};

export default EventPractice;

 

 

input 태그가 2개 이기 때문에

 

각 객체를 담은 setState에 [e.target.name] 으로 값을 담는다.

 

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