REACT_Change onChange

react에서는 onChange 이벤트도 camelCase 형식의 명칭을 사용한다

onChange 이벤트중 특정 element에 변화가 생겼을 때 정의된 함수를 호출하는 방식으로 사용한다

 

 

- R067_onChage.js

import React, { Component } from 'react';

class R067_onChange extends Component {
    change = (e) => {
        var val = e.target.value;
        console.log('param : ' + val);
    }

    render() {
        return(
            <>
            <input type="text" onChange={this.change}/>
            <select onChange={this.change}>
                <option value="react">react</option>
                <option value="200">200</option>
            </select>
            </>
        )
    }
}
export default R067_onChange;

 

 

- App.js

import React from 'react';
//import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import ReactonChange from './R067_onChange'
//import 'bootstrap/dist/css/bootstrap.css'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <ReactonChange/>
    </div>
  );
}

export default App;

 

 

결과