리액트 이벤트

이벤트 방식은 html과 비슷하며, 약간다르다.

 

1. 이벤트효과이름은 camelCase로 작성해야함.

2. 이벤트에 JS코드 전달이 아닌 함수형태의 값을 전달함.

3. DOM요소에만 이벤트 설정할 수 있음. 우리가 만든 컴포넌트에는 이벤트를 줄수 없음.

   우리가 만든 컴포넌트에 이벤트를 줘버리면 단순히 이름으로 인식해서 props를 전달해줌.

 

4. 이벤트의 종류는 많다. 

   참고 : https://reactjs.org/docs/events.html

 

이벤트 효과주는법 2가지

 

1. 랜더링할때 같이 효과부여

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import './EventPractice.css';

class EventPractice extends Component {
    constructor(props){
        super(props);
        this.state={
            message : ""
        }
    }

    render() {
        return (
            <div>
               <h1>연습 이벤트</h1>
               <input type="text" name="message" placeholder="입력해주세요" 
               onChange ={
                   (e)=> 
                 this.setState({
                    message : e.target.value
                 })
               }
               />
               <button onClick={
                   ()=> {
                    alert(this.state.message);
                    this.setState({
                        message : ""
                    });
                   }             
                 
               }>확인</button>
            </div>
        );
    }
}

export default EventPractice;

2. 랜더링전에 이벤트함수 만들기.

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import './EventPractice.css';

class EventPractice extends Component {
    constructor(props){
        super(props);
        this.state={
            message : ""
        }
        this.handleChange = this.handleChange.bind(this);  //컴포넌트에 임의메소드 만들면 기본적으로 this에 접근불가능함. bind로 묶어줘야함.
        this.handleClick = this.handleClick.bind(this);
    }

    handleChange =(e)=>{
        this.setState({
            message:e.target.value
        });
    }

    handleClick =()=>{
        alert(this.state.message);
        this.setState({
            message:''
        });
    }

    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;