Вызов функции при нажатии клавиши Tab на основе ключа?

Question

Это мои вкладки и таблицы, и я хочу вызывать различные функции на основе tabKey при нажатии на вкладку.

<Paper className={classes.root} style = {{paddingTop:50}}>
<Grid>
<TabSelector
  displayType="button"
  showTab={"Org Details"}
  showCount={false}
  highlightTab={true}
  onClick={() => this.getTabs.bind(this)}
>
  <Tab name="Org Details" tabKey="gridOrgDetails">
    <p>
      <Grid>
        <Paper className={classes.root} style={{ paddingTop: 50 }}>
          <a href="#gridOrgDetails" id="gridOrgDetails" />
          <Paper style={{ backgroundColor: "#759FEB" }}>
            <Typography> ORG Details </Typography>
          </Paper>
          <EnhancedTable
            checkBoxEnabled={false}
            Data={{ rows: this.getOrg(), headCells: orgDeatils }}
            rowsPerPage={5}
            orderBy="Call_Date_vod__c"
            order="desc"
          />
        </Paper>
      </Grid>
    </p>
  </Tab>

  <Tab
    name="License Details"
    tabKey="gridLicenseDetails"
    onClick={() => this.getLicenseDetails()}
  >
    <p>
      <Grid>
        <Paper className={classes.root} style={{ paddingTop: 50 }}>
          <a href="#gridLicenseDetails" id="gridLicenseDetails" />
          <Paper style={{ backgroundColor: "#759FEB" }}>
            <Typography> License Details </Typography>
          </Paper>
          <EnhancedTable
            checkBoxEnabled={false}
            Data={{ rows: this.getOrg(), headCells: licenseDetails }}
            rowsPerPage={5}
            orderBy="Call_Date_vod__c"
            order="desc"
          />
        </Paper>
      </Grid>
    </p>
  </Tab>
</TabSelector>;

Это моя функция, в которой я переключаю клавиши, но, похоже, это не так за работой.

Может кто-нибудь помочь мне?

getTabs(f){
  console.log(f.tabKey)
  switch(f.tabKey) {
      case "gridOrgDetails":
          return this.getOrgDetails();
          break;
      case "gridLicenseDetails":
          return this.getLicenseDetails();
          break;
  }
}

Answer 1

Вот базовое c представление того, что вы пытаетесь достичь jsFiddle

ссылка

const User = (props) => <div onClick = {props.onClick}>I am user 
{props.user}</div>

class App extends React.Component {
 constructor(props) {
 super(props)

 }
 getTabs(f){
  switch(f) {
  case "gridOrgDetails":
     console.log("gridOrgDetails")
      break;
  case "gridLicenseDetails":
       console.log("gridLicenseDetails")
      break;
  }
  }
  render() {
return (
  <div>
   <div >
         <User user="a" onClick={this.getTabs.bind(this,"gridOrgDetails")} />
         <User user="b" onClick={this.getTabs.bind(this, "gridLicenseDetails")}/>
   </div>
  </div>
  )
 }
}

ReactDOM.render(<App />, document.querySelector("#app"))