基于键在选项卡单击上调用函数？

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

这是你试图实现 jsFiddle 的基本表示

link

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"))