Я использую вкладки материалов пользовательского интерфейса и пытаюсь добавить кнопки «Назад» и «Далее» для перехода между двумя вкладками.
При этом я столкнулся с проблемой, когда я пытаюсь изменить значение вкладок, нажимая кнопки «Назад» или «Далее», вкладки не меняются, это мой текущий код:
...
this.state = {
value: 0,
};
...
handleNextTab() {
let value = this.state.value;
if (value !== 1) {
value = value + 1;
this.setState({value: value})
}
}
handleBackTab() {
let value = this.state.value;
if (value !== 0) {
value = value - 1;
this.setState({value: value})
}
}
handleTabChange(value) {
this.setState({
value: value
});
};
handleActive(value) {
this.setState({value: value})
}
render() {
return (
<div>
<Tabs
value = {this.state.value}
onChange = {this.handleTabChange.bind(this)}>
<Tab
onActive = {this.handleActive.bind(this, 0)}
label = {'page 1'}
value = {0}
key = {0}>
<div>
some code
</div>
</Tab>
<Tab
onActive = {this.handleActive.bind(this, 1)}
label = {'page 2'}
value = {1}
key = {1}>
<div>
some code
</div>
</Tab>
</Tabs>
<FlatButton
label = {'Back'}
onTouchTap = {this.handleBackTab.bind(this)}
/>
<FlatButton
label = {'Next'}
onTouchTap = {this.handleNextTab.bind(this)}
/>
</div>
);
}
Кто-нибудь знает, почему это не работает?
спасибо за помощников!
У меня все работает нормально, когда я использовал этот код вместо FlatButton
.
<button onClick = {this.handleBackTab.bind(this)}>Back</button>
<button onClick = {this.handleNextTab.bind(this)}>Next</button>
Думаю, проблема в тебе FlatButton
.
Используйте onClick
вместо onTouchTab
.
<FlatButton
label = {'Back'}
onClick = {this.handleBackTab.bind(this)}
/>
<FlatButton
label = {'Next'}
onClick = {this.handleNextTab.bind(this)}
/>
Я не смог найти onTouchTab
в документации.
Справочная ссылка: https://v0.material-ui.com/#/components/плоская кнопка
спасибо за Ваш ответ! Я пытался сделать это, но это не сработало для меня.