Question

我使用React-Bootstrap在我的React应用程序中实现了导航选项卡。

像这样：

<Tabs defaultActiveKey={1}>
    <Tab eventKey={1} title="Log in">
        {/* Irrelevant code */}
    </Tab>
    <Tab eventKey={1} title="Sign up">
        {/* Irrelevant code */}
    </Tab>
</Tabs>

现在在更改标签时，我想称之为以下功能：

changeTab(login) {
    if (login)
        this.setState({ heading: "Log in" })
    else
        this.setState({ heading: "Sign up" })
}

其中login是一个布尔值，选择true标签时为Log in，选择false标签时为Sign up。

我该怎么做？

修改

我已经发现你可以在单击选项卡时调用函数，如下所示：

<Tabs defaultActiveKey={1} onClick={()=>this.changeTab()}>
    <Tab eventKey={1} title="Log in">
        {/* Irrelevant code */}
    </Tab>
    <Tab eventKey={1} title="Sign up">
        {/* Irrelevant code */}
    </Tab>
</Tabs>

但我怎么知道点击了哪个标签？我需要它根据点击的标签更改状态。

Answer 1

我找到了解决方案。您需要在onSelect组件中使用Tabs。

像这样：

<Tabs defaultActiveKey={1} onSelect={this.handleSelect()}>
    <Tab eventKey={1} title="Log in">
        {/* Irrelevant code */}
    </Tab>
    <Tab eventKey={1} title="Sign up">
        {/* Irrelevant code */}
    </Tab>
</Tabs>

然后将其设为handleSelect函数：

handleSelect(key) {
    if (key === 1)
        this.setState({ heading: "Log in" })
    else
        this.setState({ heading: "Sign up" })
}

Answer 2

@Cacheable(value = "getChannels", key = "#btCookie", cacheManager="cacheManager")
    public List<MyChannelResponse> getMyChannelResponse(String btCookie, Integer page, Integer pageSize)
            throws Exception {

现在在您的状态下添加初始值为“ 1”的“键”字段

    <Tab.Container id="" defaultActiveKey={key} onSelect={this.handleSelect}>
                            <Nav variant="tabs">
                                <Nav.Item>
                                <Nav.Link eventKey={'1'}>Staking</Nav.Link>
                                </Nav.Item>

                                <Nav.Item>
                                <Nav.Link eventKey={'2'}>Providers</Nav.Link>
                                </Nav.Item>

                                <Nav.Item>
                                <Nav.Link eventKey={'3'}>Overview</Nav.Link>
                                </Nav.Item>
                            </Nav>
                            <Tab.Content>
                                <Tab.Pane eventKey={'1'}>
                                 <Row>
                                     <Col>
                                      1111
                                     </Col>
                                 </Row>
                                </Tab.Pane>
                            </Tab.Content>
                            <Tab.Content>
                                <Tab.Pane eventKey={'2'}>
                                <div>22222</div>
                                </Tab.Pane>
                            </Tab.Content>
                            <Tab.Content>
                                <Tab.Pane eventKey={'3'}>
                                <div>333</div>
                                </Tab.Pane>
                            </Tab.Content>
                       </Tab.Container>

然后编写一个函数

  constructor(props) {
    super(props);
    this.state = {
     key: '1'
    };
  }

最初，当页面加载时，不会调用该函数，因此您可以在第一个选项卡，componentDidMount或任何其他函数中进行API调用或要执行的任何操作，然后将其放置在第一个选项卡中编写为1111，此后单击另一个选项卡时，将调用handleSelect函数，并根据键值使用if..else语句针对特定选项卡执行特定任务。

希望这会有所帮助。如果有任何问题，请在评论部分告知我们。

如何在react-bootstrap中更改选项卡上的事件

2 个答案: