REACT_Submit onSubmit

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

onSubmit 이벤트는 <from> 태그에  사용한다

<from> 태그 안에 있는 type이 submit인 <input> 태그를 클릭하거나 <input> 태그에 마우스 커서를 놓고

Enter 를 누르면 onSubmit 이벤트가 발생한다

 

 

- R072_onSubmit.js

import { Component } from "react";

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

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

 

 

- App.js

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

import ReactonSubmit from './R072_onSubmit'
//import 'bootstrap/dist/css/bootstrap.css'

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

export default App;

 

 

결과

submit 버튼을 클릭해도 이벤트 발생, Enter눌러도 이벤트 발생한다