在我的代码中,我有一个标签菜单,我想使用按钮在这些标签之间切换。我想将这些选项卡的值传递给我的按钮的onclick函数,以便它可以在选项卡之间导航。
例如:
<Tabs value={this.state.value} onChange={this._handleChange}>
<Tab label="1" value={1}>
<RaisedButton label="Next" onTouchTap={this._handleChange} />
</Tab>
<Tab label="2" value={2}>
<RaisedButton label="Next" onTouchTap={this._handleChange} />
</Tab>
<Tab label="3" value={3}>
<RaisedButton label="Next" onTouchTap={this._handleChange} />
</Tab>
</Tabs>
我的_handleChange函数只是将状态设置为下一个标签的值
_handleChange: function(value) {
this.setState({
value: value,
});
console.log(this.state);
}
我需要以某种方式将onTouchTap事件与主要标签元素中的onChange事件相关联,但我不知道该怎么做。我的主要目标是在三个可用选项卡之间导航:当在tab1上单击下一个按钮时,它将切换到tab2,然后切换到tab3,最后返回到tab1。
有谁知道我怎么能做到这一点?如果这些元素看起来很陌生,我也在使用材质UI。
答案 0 :(得分:0)
你可以这样做:
<Tabs value={this.state.value} onChange={this._handleChange}>
<Tab label="1" value={1}>
<RaisedButton label="Next" onTouchTap={this._handleChange.bind(this, 2)} />
</Tab>
<Tab label="2" value={2}>
<RaisedButton label="Next" onTouchTap={this._handleChange.bind(this, 3)} />
</Tab>
<Tab label="3" value={3}>
<RaisedButton label="Next" onTouchTap={this._handleChange.bind(this, 1)} />
</Tab>
</Tabs>
答案 1 :(得分:0)
虽然siu回答是正确的,但要注意setState()是一个异步调用,
后面的
src
console.log
可能会按预期输出