-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
reset 이벤트에 커스텀 이벤트를 연결하는 이유가 무엇인가요?
21.06.28 20:26 작성 조회수 153
0
1234
x 버튼 누르면 검색어 지우는건 굳이 이벤트 emit subscribe 안해도 이미 html 버튼의 타입이 reset이라
x버튼 누르면 검색어가 사라지는데요
<button type="reset" class="btn-reset"></button>
굳이 커스텀 이벤트를 발생시키고
bindEvents() {
on(this.inputElement, "keyup", () => this.handleKeyup());
on(this.element, "submit", (event) => this.handleSubmit(event));
// reset 이벤트에 대해 this.handleReset() 실행
this.on("reset", () => this.handleReset());
}
handleReset() {
console.log("reset 이벤트 발생");
this.emit("@reset");
}
@reset 이벤트에 해 reset() 를 연결해서 this.store.searchKeyword = ""; 를 해주는 이유가 있나요?
ex)
this.searchFormView.on("@reset", () => this.reset());
reset() {
console.log(tag, "reset");
this.store.searchKeyword = "";
}
답변을 작성해보세요.
2
네카라
2021.06.29
btn의 reset type은 단순히 input의 value를 없애는것으로 알고있습니다.
this.store.searchKeyword = "";
위의 코드는 input의 value를 없애는것이 목적이 아니라 플로우가 render()함수로 가서 searchResultView의 hide()로 가게 됩니다. 따라서#search-result-view의 display 속성을 none으로 바꾸는데 있습니다!
혹시 틀린게 있으면 지적해주세요🙏
김정환
지식공유자2021.07.02
네 맞습니다. reset=type은 브라우져가 관리하는 input의 상태에만 영향을 미칩니다. 별도로 상태관리를 하는데 그게 searchKeyword라고 보시면되요. 이 값에 따라 다른 뷰를 제어할 목적으로 커스텀 이벤트를 사용했습니다.
네카라님 감사합니다.
답변 1