如何在 react-bootstrap 中更改选项卡上调用事件答案

【问题标题】：How to call an event on tabs changed in react-bootstrap如何在 react-bootstrap 中更改选项卡上调用事件
【发布时间】：2017-04-04 18:06:55
【问题描述】：

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

像这样：

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

现在在更改标签时，我想调用以下函数：

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

其中login是一个true for Log in 987654325 false 987654326 @选择@ 987654327选项卡时。 p>

我该怎么做？

编辑：

我发现您可以在单击选项卡时调用一个函数，如下所示：

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

但是我怎么知道点击了哪个标签呢？我需要它来根据单击的选项卡更改状态。

【问题讨论】：

您是否尝试过在 Tab 上定义 onClick 事件，如下所示：<Tab eventKey={1} title="Log in" onClick={()=>this.changeTab()}>
是的，我做到了，但没用，所以我现在在这里问。
哦，它确实是这样工作的，必须做一些修修补补，但确实奏效了。谢谢。
没关系，当您将它放在Tabs 组件上时它会起作用，但是我如何判断选择了哪个选项卡？

标签： reactjs tabs react-bootstrap

【解决方案1】：

您需要在Tabs 组件中使用onSelect。

像这样：

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

然后将其设为您的 handleSelect 函数：

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

【讨论】：

如果我们需要为每个选项卡添加不同的事件处理程序怎么办？似乎是个问题。
更多 if 处理程序中的语句应该可以解决这个问题。
或者您可以创建一个事件键和事件处理程序的关联数组，并在函数中相应地调用

【解决方案2】：

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

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

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

然后写一个函数

  handleSelect = (key) => {
      console.log(key,';;',typeof key)
      if(key === '1') {
          console.log('ll', key)
      } else if(key === '2') {
        console.log('ll', key)
      } else if(key === '3') {
        console.log('ll', key)
      }
  }

最初在页面加载时，不会调用该函数，因此您可以在第一个选项卡、componentDidMount 或任何其他函数中进行 API 调用或任何您想做的事情，并将其放置在第一个选项卡中，即我所在的位置写成 1111，之后当你点击另一个选项卡时，handleSelect 函数会被调用，并根据键值使用 if..else 语句来执行特定选项卡的特定任务。

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

【讨论】：