REACT_Click onClick

react 에서는 html과 달리 이벤트에 camelCase를 사용한다

onClick 이벤트는 특정 element가 클릭 됐을 때 정의된 함수를 호출하는 방식으로 사용한다

html에서는 onClick으로 모두 소문자로 나타낸다

 

-  R066_onClick.js

import { type } from '@testing-library/user-event/dist/type';
import { param } from 'jquery';
import React, { Component } from 'react';



class R066_onClick extends Component {
    buttonClick = (param) => {
        if(typeof param != 'string') param = "Click a"
        console.log('param : ' + param);
    }

    render() {
        return(
            <>
            <button onClick={e => this.buttonClick("Click button")}>Click button</button>
            <div onClick={e => this.buttonClick("Click div")}>Click div</div>
            <a href="javascript:" onClick={this.buttonClick}>Click a</a>
            </>
        )
    }
}

export default R066_onClick;

 

 

- App.js

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

import onClick from './R066_onClick'
//import 'bootstrap/dist/css/bootstrap.css'

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

export default App;

 

 

결과