reactjs - Ant design Tabs onClick 功能
问题描述
我使用 Ant 设计创建了选项卡。在第二个选项卡中,当我单击要触发或更改为第一个选项卡的按钮时,有一个按钮
这是我的代码
<Tabs onChange={this.tabClick} defaultActiveKey="1">
<TabPane tab={<span><Icon type="user-add" />Create Role</span>} key="1"> <FormItem
{...formItemLayout}
label="Role Name"
hasFeedback
>
{getFieldDecorator('roleName', {
rules: [{}, {
required: true, message: 'Please input Role name !',
}],
})(
<Input
placeholder="Role Name"/>
)}
</FormItem> //other fields </TabPane>
<TabPane tab={<span><Icon type="user-add" />view Role</span>}>
<Button onClick={this.doneButton} style={{marginLeft:150}} type="primary">Done</Button>
</TabPane>
你能帮助我吗?
解决方案
您可以将其更改为受控组件以访问activeKey
onTabs
组件。
class App extends React.Component {
state = {
activeTab: "1"
};
changeTab = activeKey => {
console.log(activeKey);
this.setState({
activeTab: activeKey
});
};
render() {
return (
<Tabs activeKey={this.state.activeTab} onChange={this.changeTab}>
<TabPane tab="Tab 1" key="1">
Content of Tab Pane 1
</TabPane>
<TabPane tab="Tab 2" key="2">
<Button onClick={() => this.changeTab("1")}>Done</Button>
</TabPane>
</Tabs>
);
}
}
推荐阅读
- sql - 如果基于三列的记录与最新版本的记录不匹配,是否可以在 SQL Server 中插入记录?
- java - MonetaryAmount.plus() 用于什么?要将其映射到哪个 Kotlin 运算符?
- c - 使用结构扫描和显示板球运动员输入的 AC 程序
- c - 如果一个 C 函数被调用两次,它会创建一个在函数中声明两次的变量吗?
- reactjs - 如何在 CodeSandbox React JS 中使用 BrowserRouter 和 Route?
- javascript - 是否可以在没有用户身份验证的情况下使用 navigator.getDisplayMedia?
- javascript - 为什么元素从设备移动到设备?
- selenium - 抓取Linkedin搜索结果
- c# - 是否可以在.net core Web api中调用js库
- airflow - 启动时的apache气流变量