reactjs - React Tabs onClick 获取所选选项卡的索引

Question

我是 React 新手，我正在尝试从 onClick 事件中获取选定的选项卡。

下面是我的代码以及输出。

如何实现handleSelect函数？

这是我当前的代码:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value : 0};
  }

  getState(){
    return this.state.value;
  }

  setState(state){
    this.state = state;
  }

  handleSelect(index){
    console.log('Selected tab: ' + index);
  }

  render() {
    let selectedIndex = this.getState();

    return (
      <header className="header">
        <AppBar title="App Bar" />

        <Tabs>
          <Tab label="Core Courses" onClick={this.handleSelect(0)} />
          <Tab label="Capstone Requirement" onClick={this.handleSelect(1)}/>
          <Tab label="Computer Science Electives" onClick={this.handleSelect(2)}/>
          <Tab label="Support Courses" onClick={this.handleSelect(3)} />
        </Tabs>

      </header>
    );
  }
}

这是当前渲染时的控制台日志:

Selected tab: 0
Selected tab: 1
Selected tab: 2
Selected tab: 3

Answer 1

以下代码将向所选选项卡添加“事件”类。如果所选选项卡中有一个“事件”类，希望您可以使用 css 对其进行管理。

class Header extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
    activeTab : 0
  };
  this.handleSelect = this.handleSelect.bind(this);
}

handleSelect(index){
  this.setState({
    activeTab: index
  });
}

render() {
  let selectedIndex = this.getState();

  return (
    <header className="header">
      <AppBar title="App Bar" />
      <Tabs>
        <Tab classsName={this.state.activeTab == 0 ? 'active' : ''} label="Core Courses" onClick={this.handleSelect(0)} />
        <Tab classsName={this.state.activeTab == 1 ? 'active' : ''} label="Capstone Requirement" onClick={this.handleSelect(1)}/>
        <Tab classsName={this.state.activeTab == 2 ? 'active' : ''} label="Computer Science Electives" onClick={this.handleSelect(2)}/>
        <Tab classsName={this.state.activeTab == 3 ? 'active' : ''} label="Support Courses" onClick={this.handleSelect(3)} />
    </Tabs>
  </header>
);

}}