Javascript / 제출 버튼 클릭시 새로고침을 막아보자(preventDefalut)

event.preventDefault();

폼 안에 있는 submit의 이벤트에 preventDefalut라는 매서드를 호출하면 제출을 해도 새로고침이 되지 않는당.

 

<ReactPreventDefalut.js>

import React, { Component } from 'react'

export default class ReactPreventDefault 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>
		)
	}
}

 

예를 들면 리액트에서 이렇게 코드를 짯다고 치자!

 

그럼 App.js에 맞춰놓은대로 달라지겠지만, 위의 내용만 보면 위와 같은 서브밋 버튼이 나올것이다.

 

원래라면 submit을 누르면 해당 정보가 전송(설정해둔 값으로 => 현재는 설정해둔 값이 없는 상태)되고

안의 정보가 초기화 된다.

 

하지만 Submit에서 받은 이벤트 인자값인 e에 preventDefalut 메소드를 호출하면 해당 내용이 새로고침 되지 않고 그대로 남아있게 된다.

 

이상!