EventPractice2 ( input 여러 개를 핸들링 )

import React, { Component } from "react";
 
class EventPractice2 extends Component {
  state = {
    username: "",
    message: "",
  };
// 해당 함수에서 e 는 this의 의미로 생각하면 됨. 즉 이 함수를 호출해서쓰고있는 input을 말함
  handleChange = (e) => {
    console.log(e);
    this.setState({
      [e.target.name]: e.target.value,
    });
  };
 
  handleClick = () => {
    alert(this.state.username + ": " + this.state.message);
    this.setState({
      username: "",
      message: "",
    });
  };
// 해당 함수에서 e 는 this의 의미로 생각하면 됨. 즉 이 함수를 호출해서쓰고있는 input을 말함
  handleKeyPress = (e) => {
    if (e.key === "Enter") {
      this.handleClick();
    }
  };
 
  render() {
    return (
      <div>
        <h1>이벤트 연습2</h1>
        <input
          type="text"
          name="username"
          placeholder="유저이름"
          value={this.state.username}
          onChange={this.handleChange}
        />
        <input
          type="text"
          name="message"
          placeholder="아무거나 입력하세요"
          value={this.state.message}
          onChange={this.handleChange}
          onKeyPress={this.handleKeyPress}
        />
        <button onClick={this.handleClick}>확인</button>
      </div>
    );
  }
}
 
export default EventPractice2;