dommer dommer - 8 months ago 116
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

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
handler returns it, but I'd like to use
in this instance.

Answer Source

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.

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