react 이벤트 사용하기

 

 

-onChenge

app.js

import Reactchange from './onChange';
class App extends Component {
  render() {
    return (
      <div>
        <h1>Start React 200!</h1>
        <Reactchange/>
      </div>
    );
  }
}

export default App;

 

onChange.js

import React,{Component} from 'react';

class onChange extends Component {
    change = (e) =>{
        var val = e.target.value;
        console.log('param :' + val);
    }
    render() {
        
        return (
            <div>
                <input type="text" onChange={this.change}/>
                <select onChange={this.change}>
                    <option value="react">react</option>
                    <option value="200">200</option>
                </select>
            </div>
        );
    }
}

export default onChange;

 

 

mousemove

 

app.js

import Reactmousemove from './onMouseMove';


class App extends Component {
  render() {
    return (
      <div>
        <h1>Start React 200!</h1>
        <Reactmousemove/>
      </div>
    );
  }
}

export default App;

 

 

 

onMouseMove.js

import React, { Component } from 'react';

class onMouseMove extends Component {
    MouseMove(tag){
        console.log('tag : ' + tag);
    }
    render() {
        return (
            <div>
                <idv onMouseMove ={e => this.MouseMove("div")}>
                    <h3>DIV onMouseMove</h3>
                </idv>
                <input type="text" onMouseMove={e=> this.MouseMove("input")}/>
                <select onMouseMove={e => this.MouseMove("select")}>
                    <option value="react">react</option>                    
                    <option value="200">200</option>                    
                </select>
            </div>
        );
    }
}

export default onMouseMove;

 

onMouseOver

app.js

import ReactMouseOver from './onMouseOver';
class App extends Component {
  render() {
    return (
      <div>
        <h1>Start React 200!</h1>
        <ReactMouseOver/>
      </div>
    );
  }
}

export default App;

 

onMouseOver

import React, { Component } from 'react';

class onMouseOver extends Component {
    MouseOver(tag){
        console.log('Tag :' +tag);
    }
    render() {
        return (
            <div>
                    <div onMouseOver={e => this.MouseOver("div")}>
                    <h3>DIV onMouseOver</h3>
                    </div>
                    <input type="text" onMouseOver ={e => this.MouseOver("input")}/>
                    <select onMouseOver={e => this.MouseOver("select")}>
                        <option value="react">react</option>
                        <option value="200">200</option>
                    </select>


            </div>
        );
    }
}

export default onMouseOver;

 

 

 

onMouseOut

app.js

import ReactMouseOut from './onMouseOut';


class App extends Component {
  render() {
    return (
      <div>
        <h1>Start React 200!</h1>
        <ReactMouseOut/>
      </div>
    );
  }
}

export default App;

 

onMouseOut.js

import React, { Component } from 'react';

class onMouseOut extends Component {
    MouseOut(tag){
        console.log('tag : ' +tag);

    }
    render() {
        return (
            <div>
            <div onMouseOut={e => this.MouseOut("div")}>
            <h3>DIV onMouseOut</h3>
            </div>
            <input type="text" onMouseOut ={e => this.MouseOut("input")}/>
            <select onMouseOut={e => this.MouseOut("select")}>
                <option value="react">react</option>
                <option value="200">200</option>
            </select>
            </div>
        );
    }
}

export default onMouseOut;

 

OnkeyPress

app.js

 

import ReactOnkey from './OnKey';

class App extends Component {
  render() {
    return (
      <div>
        <h1>Start React 200!</h1>
        <ReactOnkey/>
      </div>
    );
  }
}

export default App;

 

ReactOnkey.js

import React, { Component } from 'react';

class OnKey extends Component {
    OnKey(event, e){
        var val = e.target.value;
        console.log('event : ' +event+", value:"+val);
    }
    render() {
        return (
            <div>
                onKeyDown : <input type="text" onKeyDown ={e => this.OnKey("onkeyDown : e", e)}/><br/>
                onKeyPress : <input type="text" onKeyPress ={e => this.OnKey("onkeyPress : e", e)}/><br/>
                onKeyUp : <input type="text" onKeyUp ={e => this.OnKey("onKeyUp : e", e)}/><br/>
            </div>
        );
    }
}

export default OnKey;

 

 

OnSubmit

app.js

import ReactOnSubmit from './onSubmit';

class App extends Component {
  render() {
    return (
      <div>
        <h1>Start React 200!</h1>
        <ReactOnSubmit/>
      </div>
    );
  }
}

export default App;

 

onSubmit.js

import React, { Component } from 'react';

class onSubmit extends Component {
    Submit(e){
        var inputValue = document.getElementById("inputId").value;
        console.log("inputValue : " + inputValue);
        e.preventDefault();

    }
    render() {
        return (
            <div>
                <form onSubmit={this.Submit}>
                    <input type="text" name="inputName" id="inputId"/>
                    <input type="submit" value="Submit"/>
                </form>
            </div>
        );
    }
}

export default onSubmit;