如何在反应中更改的选项卡上调用事件-bootstrap

Question

我已经使用 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" })
}

Where login is a Boolean that will be true for when the Log in tab is selected and false when the Sign up tab is selected.

我该怎么做？

编辑：

我发现您可以像这样在单击选项卡时调用函数：

<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

您需要在 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" })
}

Answer 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 语句为特定选项卡执行特定任务。

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

如何在反应中更改的选项卡上调用事件-bootstrap

How to call an event on tabs changed in react-bootstrap

tabs

reactjs

react-bootstrap