React - onSelect 函数在 React Bootstrap 中不起作用

Question

我在我的应用程序中使用了“react-bootstrap”。我使用了Tab Component。我想要选项卡组件的 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 中更改的选项卡上调用事件的解决方案，但它也不起作用。

Answer 1

根据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>

参考https://react-bootstrap.github.io/components/tabs/