만들면서 학습하는 리액트(react):준비편 - 순수JS - 007
준비편 - 순수JS
[순수JS 1] 탭3
요구사항
각 탭을 클릭하면 탭 아래 내용이 변경된다
구현
- TabView.js 수정
...
export default class TabView extends View {
constructor() {
...
this.bindEvents();
}
bindEvents() {
delegate(this.elelment, "click", "li", event => this.handleClick(event));
}
handleClick(event) {
console.log(tag, event);
const value = event.target.dataset.tab;
this.emit('@change', { value });
}
...
}
...
- Controller.js 수정
...
export default class Controller {
...
subscribeViewEvents() {
...
this.tabView.on('@change', event => this.changeTab(event.detail.value));
}
changeTab(tab) {
console.log(tag, "changeTab", tab);
this.store.selectedTab = tab;
this.render();
}
}