使用后退和下一步按钮在选项卡之间导航 - material-ui（版本 0.18.7）

Question

我正在使用 material ui 选项卡，我正在尝试添加后退和下一步按钮以在两个选项卡之间导航。

这样做时，我遇到了一个问题，当我尝试通过单击后退或下一步按钮来更改选项卡的值时，选项卡不会更改，这是我当前的代码：

...

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>
); 
}

有人知道为什么它不起作用吗？

感谢各位帮手！

Answer 1

当我使用此代码而不是 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。参考link：https://v0.material-ui.com/#/components/flat-button

使用后退和下一步按钮在选项卡之间导航 - material-ui（版本 0.18.7）

Using back and next buttons for navigate between tabs - material-ui (version 0.18.7)

javascript

reactjs

material-ui