CapsuleTabs获取选项卡的值react
时间: 2023-10-07 13:04:22 浏览: 40
在React中,可以使用状态来获取选项卡的值。具体实现方法如下:
1. 首先,在组件的state中添加一个选项卡的值的状态:
```
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'tab1',
};
}
...
}
```
2. 然后,在选项卡的onChange事件中更新这个状态:
```
class MyComponent extends React.Component {
...
handleTabChange = (value) => {
this.setState({
selectedTab: value,
});
}
...
render() {
return (
<CapsuleTabs
...
onChange={this.handleTabChange}
...
>
<CapsuleTabs.TabPane tab="Tab 1" key="tab1">
Tab 1 Content
</CapsuleTabs.TabPane>
<CapsuleTabs.TabPane tab="Tab 2" key="tab2">
Tab 2 Content
</CapsuleTabs.TabPane>
</CapsuleTabs>
);
}
}
```
3. 最后,可以在其他地方使用这个状态来获取选项卡的值:
```
class MyComponent extends React.Component {
...
render() {
const { selectedTab } = this.state;
return (
<div>
<p>Selected Tab: {selectedTab}</p>
<CapsuleTabs
...
onChange={this.handleTabChange}
...
>
<CapsuleTabs.TabPane tab="Tab 1" key="tab1">
Tab 1 Content
</CapsuleTabs.TabPane>
<CapsuleTabs.TabPane tab="Tab 2" key="tab2">
Tab 2 Content
</CapsuleTabs.TabPane>
</CapsuleTabs>
</div>
);
}
}
```