我是 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
最佳答案
以下代码将向所选选项卡添加“事件”类。如果所选选项卡中有一个“事件”类,希望您可以使用 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>
);
} }
关于reactjs - React Tabs onClick 获取所选选项卡的索引,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40699913/