reactjs - 反应 - 反应引导的 onSelect 功能不起作用
问题描述
我在我的应用程序中使用了“react-bootstrap”。我使用了选项卡组件。我想要标签组件的 onSelect 功能。
下面是我的组件代码
export default class Users extends Component {
handleSelect() {
console.log("Tab selected")
}
render() {
return(
<div className="welcome-wrap">
<br />
<div className="row">
<h3>Users</h3>
<Tabs defaultActiveKey={1} animation={false} id="user-role-tab">
<Tab eventKey={1} title="Root Users" className="
" onSelect={this.handleSelect()}>
<RootUser/>
</Tab>
<Tab eventKey={2} title="Organization Users" onSelect={this.handleSelect()}>
<OrganizationUser/>
</Tab>
<Tab eventKey={3} title="Business Users" onSelect={this.handleSelect()}>
<BusinessUser/>
</Tab>
</Tabs>
</div>
</div>
)
}
}
它在加载组件时工作,但是当我单击任何选项卡时,不会调用该函数。我检查了如何在 react-bootstrap 中更改的选项卡上调用事件的解决方案,但它也不起作用。
解决方案
根据react-bootstrap
文档。onSelect
是 的属性Tabs
,不是Tab
。像这样:
<Tabs
activeKey={this.state.key}
onSelect={this.handleSelect} //For Tabs
id="controlled-tab-example"
>
<Tab eventKey={1} title="Tab 1">
Tab 1 content
</Tab>
<Tab eventKey={2} title="Tab 2">
Tab 2 content
</Tab>
<Tab eventKey={3} title="Tab 3" disabled>
Tab 3 content
</Tab>
</Tabs>
推荐阅读
- selenium - ExpectedConditions.presenceOf 和 element.isPresent 有什么区别
- c# - selenium.WebDriverException:未知错误:Runtime.evaluate 在参数列表后抛出异常:SyntaxError:missing )。以前的ans没有解决
- urlencode - 呈现 Jasper 报告时出现授权错误
- android - DialogFragment - 设置状态栏颜色在某些设备上不起作用
- php - mac和windows上传文件名编码不同的问题
- typescript - Typescript Fetch API 返回 Promise
或承诺 - python - while循环中的空白图
- python - 如何从模型的视图访问序列化器字段?
- java - hibernate-orm-panache-resteasy: {"error":"id to load is required for loading","code":500} running a native build
- azure - 是否可以将 Azure Dev Spaces 与 API 管理一起使用?