I have a tab menu in my code and I am looking to implement a feature where tabs can be switched using a button. The challenge is passing the values of these tabs into the onclick function of the button in order to navigate between them.
Here is an example:
<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>
The _handleChange function updates the state with the value of the next tab
_handleChange: function(value) {
this.setState({
value: value,
});
console.log(this.state);
}
I am trying to connect the onTouchTap event with the onChange event from the main tabs element, but I am unsure of how to achieve this. My objective is to cycle through the three available tabs: clicking "Next" on tab1 should move to tab2, then tab3, and back to tab1.
If anyone has insight on how to accomplish this task, it would be greatly appreciated. Note that I am utilizing material UI components if you find the elements unfamiliar.