REACT_핸들링

REACT에서 지원하는 이벤트 종류

• Clipboard
• Composition
• Keyboard
• Focus
• Form
• Mouse
• Selection
• Touch
• UI
• Image
• Wheel
• Animation
• Media
• Transition

import React, {Component} from 'react';

class EventPractice extends Component {
  state = {
    message: ""
  }

  constructor(props){
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }
//값이 변화할 때
  handleChange(e){
    this.setState({
      message: e.target.value
    });
  }
//클릭했을때
  handleClick(){
    alert(this.state.message);
    this.setState({
      message: ''
    });
  }

//키를 눌렀을 때
    handleKeyPress= (e) => {
    if(e.key === 'Enter'){
      this.handleClick();
    }
  }
  render(){
    return(
      <div>
        <h1>이벤트 연습</h1>
        <input
          type="text"
          name="message"
          placeholder="아무거나 입력해보세요"
          value={this.state.message}
          onChange={this.handleChange}
        />
        <button onClick={this.handleClick}>
          확인
        </button>
      </div>

    );
  }
}
export default EventPractice;

해당하는 input의 name을 이용하고싶은때는

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

[]과 target.name을 이용하여 사용해주면 된다.