리액트 웹앱 제작 총론(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가지 방법을 설명한 내용은 다음 블로그에 있다.
- event.preventDefault()
- event.stopPropagation()
- eventstopImmediatePropagation()
- return false
'java script' 카테고리의 다른 글
[react] Cannot read property 'setState' of undefined 에러 해결 (0) | 2017.12.15 |
---|---|
react 날짜 시간 개발시 YouCanBookMe/react-datetime lib가 가장 좋다. (0) | 2017.12.14 |
[react 공부] 리액트 웹앱 제작 총론 (learning react) 참조 자료 (1) | 2017.12.08 |
[react] 초보자를 위한 링크 (0) | 2017.09.21 |
[node] node_modules 디렉토리 (0) | 2016.02.18 |