dommer dommer - 13 days ago 10
React JSX Question

Can I pass the selected tab back from onTouchTap event of Material-UI Tabs component?

I'm using the Material-UI Tabs component in my ReactJS app.

I'm handling the

onTouchTap
event of the Tabs component. I'd like to pass the currently selected tab back as a parameter to the event handler.

Is this possible?

So something like this

<Tabs onChange={props.onChangePosition}
onTouchTap={e => {/* What */}>


I know that the
onChange
handler returns it, but I'd like to use
onTouchTap
in this instance.

Answer

Yes, this can be done. You need to capture a "ref" to your Tabs control, and then call getSelectedIndex() on it, inside your onTouchTap. getSelectedIndex is somewhat internal, so it has an unexpected method signature in that you must also pass it in its own props.

<Tabs
  ref={ref => (this.tabs = ref)}
  onTouchTap={(e) => console.log(this.tabs.getSelectedIndex(this.tabs.props))}
>
...