리액트 웹앱 제작 총론(learning react)의 14장 예시에 화면 리프레시를 안하는 기능이 있어서 정리한다. 



var destination = document.querySelector("#container");
var TodoItems = React.createClass({
render() {
var todoEntries = this.props.entries;
function createTasks(item) {
return <li key={item.key}>{item.text}</li>
}

console.log("aaa")
var listItems = todoEntries.map(createTasks);
return (
<ul className="theList">
{listItems}
</ul>
);
}
});
var TodoList = React.createClass({
getInitialState: function() {
return {
items: []
};
},
addItem(e) {
var itemArray = this.state.items;
itemArray.push(
{
text: this._inputElement.value,
key: Date.now()
}
);
this.setState({
items: itemArray
});

this._inputElement.value = ""
this._inputElement.focus
e.preventDefault();
},
render() {
return (
<div className="todoListMain">
<div className="header">
<form onSubmit={this.addItem}>
<input ref={(a) => this._inputElement = a}
placeholder="enter task">
</input>
<button type="submit">add</button>
</form>
</div>
<TodoItems entries={this.state.items}/>
</div>
);
}
});

ReactDOM.render(
<div>
<TodoList/>
</div>,
destination
);



html에서 form onSubmit을 호출할 때는 무조건 페이지가 로딩된다.


그러나, addItem() 아래 부분에 아래를 추가하면.. 클릭 이벤트를 실행하지만 웹 브라우져는 이동하지 말라는 뜻이다. 


e.preventDefault();



java script에서 이벤트 전파를 중단하는 4가지 방법을 설명한 내용은 다음 블로그에 있다.



http://programmingsummaries.tistory.com/313


- event.preventDefault()

- event.stopPropagation()

- eventstopImmediatePropagation()

- return false


Posted by 김용환 '김용환'