리액트 배우기 ( 이벤트 튜토리얼 )

import React, { Component } from "react";

 

class EventPractice extends Component {

  state = {

    username: "",

    message: "",

  };

 

  handleChange = (e) => {

    this.setState({

      [e.target.name]: e.target.value,

    });

  };

 

  handleClick = () => {

    alert(this.state.username + ":" + this.state.message);

    this.setState({

      username: "he",

      message: "ha",

    });

  };

 

  handleKeyPress = (e) => {

    if (e.key === "Enter") {

      this.handleClick();

    }

  };

 

  render() {

    return (

      <div>

        <h1>이벤트 연습</h1>

        <input

          type="text"

          name="username"

          placeholder="사용자명"

          value={this.state.maessage}

          onChange={this.handleChange}

        />

        <input

          type="text"

          name="message"

          placeholder="입력하세요"

          value={this.state.maessage}

          onChange={this.handleChange}

          onKeyPress={this.handleKeyPress}

        />

        <button onClick={this.handleClick}>확인</button>

      </div>

    );

  }

}

 

export default EventPractice;

 

보충 예정