Question

我正在使用重要的用户界面选项卡，并尝试添加后退和下一个按钮在两个选项卡之间导航。

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

...

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。参考链接：https://v0.material-ui.com/#/components/flat-button

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

1 个答案: