Event Handling

Event Handling

리액트에서 지원하는 이벤트 종류

• Clipboard
• Focus
• Form
• Selection
• UI
• Media
• Animation
• Keyboard
• Composition
• Mouse
• Touch
• Wheel
• Image
• Transition
  [React SyntheticEvent] https://legacy.reactjs.org/docs/events.html

import React, { Component } from "react";

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


  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this)
    this.handleClick = this.handleClick.bind(this)
    this.handleKeyPress = this.handleKeyPress.bind(this)
  }

   handleChange(e) {
      this.setState({
        // Object 형태
        // [name]: key
        [e.target.name] : e.target.value
      });
    }
  
    handleClick() {
      alert(this.state.username + ' : ' + this.state.message);
      this.setState({
        message: '',
        username: ''
        });
    }

    handleKeyPress(e) {
      if (e.key === 'Enter') {
        this.handleClick();
      }
      }
    ;
    
  
  
    
    render() {
      return(
        <div>
          <h1>이벤트 연습</h1>
          <input 
          type="text"
          name="username"
          placeholder="이름"
          value={this.state.username}
          onChange={this.handleChange}
          onKeyPress={this.handleKeyPress}
          />
        <input 
          type="text"
          name="message"
          placeholder="입력"
          value={this.state.message}
          onChange={this.handleChange}
          onKeyPress={this.handleKeyPress}
          />
        <button onClick={this.handleClick}>확인</button>
        </div>
      )
    }
  
  }
       
export default EventPractice;